feat: set tiles view as default view option

packages/design-system/src/components/OcStatusIndicators/OcStatusIndicators.vue

@@ -13,6 +13,8 @@
         appearance="raw"
         :data-testid="indicator.id"
         :data-test-indicator-type="indicator.type"
+        :data-test-indicator-resource-name="resource.name"
+        :data-test-indicator-resource-path="resource.path"
         no-hover
         @click="(e: MouseEvent) => indicator.handler?.(resource, e)"
       >
@@ -67,7 +69,7 @@ export interface Props {
   /**
    * @docs The resource that the indicators are related to.
    */
-  resource: unknown
+  resource: { id?: string; name?: string; path?: string }
   /**
    * @docs The indicators to be displayed. Please refer to the component source code for the `Indicator` type definition.
    */

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -157,7 +157,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-1" data-test-context-menu-resource-name="1 Some space">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -215,7 +215,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       };
       return svg;
     }" aria-hidden="true" focusable="false" class="size-5.5"></svg></span>
-            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2">
+            </button> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 spaces-table-btn-action-dropdown" id="context-menu-trigger-2" data-test-context-menu-resource-name="2 Another space">
               <!--v-if-->
               <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Spaces.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`Spaces view > loading states > should render spaces list after loading
             <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
             <div class="flex">
-              <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
+              <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
             </div>
           </div>
           <div class="admin-settings-app-bar-actions flex items-center mt-1 min-h-10">

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`Users view > list view > renders initially warning if filters are manda
             <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
             <div class="flex">
-              <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
+              <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
             </div>
           </div>
           <div class="admin-settings-app-bar-actions flex items-center mt-1 min-h-10">
@@ -70,7 +70,7 @@ exports[`Users view > list view > renders list initially 1`] = `
             <oc-breadcrumb-stub items="[object Object],[object Object]" contextmenupadding="medium" id="admin-settings-breadcrumb" maxwidth="-1" showcontextactions="false" truncationoffset="2" variation="default"></oc-breadcrumb-stub>
             <portal-target name="app.runtime.mobile.nav"></portal-target>
             <div class="flex">
-              <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
+              <view-options-stub perpagestorageprefix="admin-settings" hashiddenfiles="false" hasfileextensions="false" haspagination="true" paginationoptions="20,50,100,250" perpagequeryname="items-per-page" perpagedefault="50" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
             </div>
           </div>
           <div class="admin-settings-app-bar-actions flex items-center mt-1 min-h-10">

packages/web-app-files/src/views/spaces/Projects.vue

@@ -11,7 +11,7 @@
         :batch-actions-loading="batchActionsLoading"
         :is-side-bar-open="isSideBarOpen"
         :view-modes="viewModes"
-        :view-mode-default="FolderViewModeConstants.name.tiles"
+        :view-mode-default="FolderViewModeConstants.defaultModeName"
       >
         <template #actions>
           <create-space v-if="hasCreatePermission" class="mr-2" />

packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap

@@ -4,7 +4,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
 "<div class="flex">
   <div class="files-view-wrapper relative grid grid-cols-1 flex-1 focus:outline-0 h-full overflow-y-auto gap-0">
     <div id="files-view" class="outline-0 z-0">
-      <app-bar-stub viewmodedefault="resource-table" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
+      <app-bar-stub viewmodedefault="resource-tiles" breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" viewmodes="" hasbulkactions="false" hasviewoptions="true" hashiddenfiles="false" hasfileextensions="false" haspagination="false" showactionsonselection="false" issidebaropen="false" batchactionsloading="false"></app-bar-stub>
       <div class="trash-bin-filters flex justify-end flex-wrap items-end mx-4 mb-4">
         <div class="w-3xs"><label class="oc-label" for="trash-filter">Search
             <!--v-if-->

packages/web-pkg/src/components/AppBar/AppBar.vue

@@ -123,7 +123,7 @@ export default defineComponent({
     viewModeDefault: {
       type: String,
       required: false,
-      default: () => FolderViewModeConstants.name.table
+      default: () => FolderViewModeConstants.defaultModeName
     },
     breadcrumbs: {
       type: Array as PropType<BreadcrumbItem[]>,

packages/web-pkg/src/components/ContextActions/ContextMenuQuickAction.vue

@@ -2,6 +2,7 @@
   <oc-button
     :id="`context-menu-trigger-${resourceDomSelector(item)}`"
     v-oc-tooltip="contextMenuLabel"
+    :data-test-context-menu-resource-name="item.name"
     :aria-label="contextMenuLabel"
     appearance="raw"
     class="quick-action-button ml-1 p-1"

packages/web-pkg/src/components/FilesList/ResourceListItem.vue

@@ -16,6 +16,7 @@
         :key="thumbnail"
         v-oc-tooltip="tooltipLabelIcon"
         :src="thumbnail"
+        :data-test-thumbnail-resource-name="resource.name"
         class="oc-resource-thumbnail rounded-xs size-8 object-cover"
         width="40"
         height="40"

packages/web-pkg/src/components/FilesList/ResourceTable.vue

@@ -67,6 +67,8 @@
         :disabled="isResourceDisabled(item)"
         :model-value="isResourceSelected(item)"
         :outline="isLatestSelectedItem(item)"
+        :data-test-selection-resource-name="item.name"
+        :data-test-selection-resource-path="item.path"
         @click.stop="
           (e: MouseEvent) => {
             if (!interceptModifierClick(e, item)) {

packages/web-pkg/src/components/FilesList/ResourceTile.vue

@@ -52,9 +52,10 @@
           <slot name="imageField" :item="resource">
             <oc-image
               v-if="resource.thumbnail"
-              class="tile-preview rounded-t-sm size-full object-cover aspect-[16/9]"
+              class="tile-preview rounded-t-sm size-full object-cover aspect-[16/9] pointer-events-none"
               :class="{ 'rounded-sm': isResourceSelected }"
               :src="resource.thumbnail"
+              :data-test-thumbnail-resource-name="resource.name"
               @click="toggleTile([resource, $event])"
             />
             <resource-icon
@@ -222,9 +223,11 @@ if (!lazy) {
   .oc-tile-card:hover .tile-preview {
     @apply rounded-sm;
   }
+
   .oc-tile-card:hover .oc-tile-card-preview {
     @apply p-2;
   }
+
   /* Show tooltip on status indicators without handler */
   .oc-tile-card-disabled span.oc-status-indicators-indicator {
     pointer-events: all;

packages/web-pkg/src/components/FilesList/ResourceTiles.vue

@@ -59,7 +59,7 @@
           :is-extension-displayed="areFileExtensionsShown"
           :resource-icon-size="resourceIconSize"
           :draggable="dragDrop"
-          :lazy="lazy"
+          :lazy="areTilesLazy"
           :is-loading="isResourceInDeleteQueue(resource.id)"
           @vue:mounted="
             $emit('rowMounted', resource, tileRefs.tiles[resource.id], ImageDimension.Tile)
@@ -82,6 +82,8 @@
               class="inline-flex p-2"
               :disabled="isResourceDisabled(resource)"
               :model-value="isResourceSelected(resource)"
+              :data-test-selection-resource-name="resource.name"
+              :data-test-selection-resource-path="resource.path"
               @click.stop.prevent="toggleTile([resource, $event])"
             />
           </template>
@@ -92,7 +94,7 @@
             <resource-status-indicators
               :space="space"
               :resource="resource"
-              :filter="(indicator) => indicator.category === 'system'"
+              :filter="(indicator) => ['system', 'sharing'].includes(indicator.category)"
               :disable-handler="isResourceDisabled(resource)"
             />
           </template>
@@ -240,6 +242,9 @@ const viewSizeCurrent = computed(() => {
   return Math.min(unref(viewSizeMax), viewSize)
 })
 
+// Disable lazy loading during E2E tests to avoid having to scroll in tests
+const areTilesLazy = (window as any).__E2E__ === true ? false : lazy
+
 const areFileExtensionsShown = computed(() => resourcesStore.areFileExtensionsShown)
 
 const selectAllCheckboxLabel = computed(() => {
@@ -652,6 +657,7 @@ onBeforeUnmount(() => {
   .oc-tiles {
     grid-template-columns: repeat(auto-fit, minmax(var(--oc-size-tiles-actual), 1fr));
   }
+
   .oc-tiles-sort-filter-chip .oc-filter-chip-label {
     @apply text-sm;
   }

packages/web-pkg/src/composables/viewMode/constants.ts

@@ -5,7 +5,7 @@ export const FolderViewModeConstants = {
     condensedTable: 'resource-table-condensed',
     tiles: 'resource-tiles'
   },
-  defaultModeName: 'resource-table',
+  defaultModeName: 'resource-tiles',
   queryName: 'view-mode',
   tilesSizeDefault: 2,
   tilesSizeMax: 6,

packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap

@@ -10,7 +10,7 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
       <div id="files-app-bar-controls-right" class="flex">
-        <view-options-stub perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
+        <view-options-stub perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
       </div>
     </div>
     <div class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10 gap-2">
@@ -32,7 +32,7 @@ exports[`AppBar component > renders > if given, with content in the actions slot
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
       <div id="files-app-bar-controls-right" class="flex">
-        <view-options-stub perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
+        <view-options-stub perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
       </div>
     </div>
     <div class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10 gap-2">
@@ -54,7 +54,7 @@ exports[`AppBar component > renders > if given, with content in the content slot
       <portal-target name="app.runtime.mobile.nav"></portal-target>
       <!--v-if-->
       <div id="files-app-bar-controls-right" class="flex">
-        <view-options-stub perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-table" viewmodes=""></view-options-stub>
+        <view-options-stub perpagestorageprefix="files" hashiddenfiles="true" hasfileextensions="true" haspagination="true" paginationoptions="20,50,100,250,500" perpagequeryname="items-per-page" perpagedefault="100" viewmodedefault="resource-tiles" viewmodes=""></view-options-stub>
       </div>
     </div>
     <div class="files-app-bar-actions flex items-center justify-end mt-1 min-h-10 gap-2">

packages/web-pkg/tests/unit/components/FilesList/__snapshots__/ResourceTiles.spec.ts.snap

@@ -35,7 +35,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-1" data-test-context-menu-resource-name="Space 1">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {
@@ -74,7 +74,7 @@ exports[`ResourceTiles component > renders an array of spaces correctly 1`] = `
               <!-- Slot for indicators !-->
               <!--v-if-->
               <!-- Slot for individual actions -->
-              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2">
+              <!-- Slot for contextmenu --> <button type="button" aria-label="Show context menu" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button inline-flex cursor-pointer disabled:opacity-60 disabled:cursor-default quick-action-button ml-1 p-1 resource-tiles-btn-action-dropdown" id="context-menu-trigger-2" data-test-context-menu-resource-name="Space 2">
                 <!--v-if-->
                 <!-- @slot Content of the button --> <span class="oc-icon box-content size-5.5"><svg data-testid="inline-svg-stub" src="icons/more-2-fill.svg" transform-source="(svg) => {
       if (__props.accessibleLabel !== &quot;&quot;) {

tests/e2e/cucumber/features/file-action/copyMove.feature

@@ -33,6 +33,7 @@ Feature: Copy
       | PARENT/fileToCopy4.txt   | some content                        |
       | PARENT/fileToCopy5.txt   | some content                        |
     And "Alice" logs in
+    And "Alice" reduces the tile size
 
     When "Alice" copies the following resource using sidebar-panel
       | resource    | to          |

tests/e2e/cucumber/features/shares/denyShareAccess.feature

@@ -12,6 +12,7 @@ Feature: deny share access
       | folder_to_shared/folder         |
       | folder_to_shared/folder_to_deny |
     And "Alice" opens the "files" app
+    And "Alice" switches to the "resource-table" view mode
     And "Alice" shares the following resource using the quick action
       | resource         | recipient | type | role     | resourceType |
       | folder_to_shared | Brian     | user | Can view | folder       |

tests/e2e/cucumber/features/smoke/tags.feature

@@ -11,6 +11,7 @@ Feature: Users can use web to organize tags
       | pathToFile | content     |
       | lorem.txt  | lorem ipsum |
     And "Alice" logs in
+    And "Alice" switches to the "resource-table" view mode
     And "Alice" adds the following tags for the following resources using the sidebar panel
       | resource  | tags         |
       | lorem.txt | tag 1, tag 2 |
@@ -38,6 +39,7 @@ Feature: Users can use web to organize tags
       | lorem.txt    | lorem ipsum |
       | textfile.txt | test file   |
     And "Alice" logs in
+    And "Alice" switches to the "resource-table" view mode
     And "Alice" adds the following tags for the following resources using the sidebar panel
       | resource  | tags       |
       | lorem.txt | tag1, tag2 |
@@ -59,6 +61,7 @@ Feature: Users can use web to organize tags
       | pathToFile                 | content     |
       | folder_to_shared/lorem.txt | lorem ipsum |
     And "Alice" logs in
+    And "Alice" switches to the "resource-table" view mode
     And "Alice" adds the following tags for the following resources using the sidebar panel
       | resource                   | tags         |
       | folder_to_shared/lorem.txt | tag 1, tag 2 |
@@ -68,6 +71,7 @@ Feature: Users can use web to organize tags
     And "Alice" logs out
 
     And "Brian" logs in
+    And "Brian" switches to the "resource-table" view mode
     And "Brian" navigates to the shared with me page
     Then the following resources should contain the following tags in the files list for user "Brian"
       | resource                   | tags         |