Select all checkbox tiles view (#11518)

* Add select all checkbox to tiles view

changelog/unreleased/enhancement-add-select-all-checkbox-to-tiles-view

@@ -0,0 +1,5 @@
+Enhancement: Add select all checkbox to tiles view
+
+We have added a select all checkbox to the tiles view to allow users to select all resources at once.
+
+https://github.com/owncloud/web/pull/11518

packages/design-system/src/components/OcCheckbox/OcCheckbox.spec.ts

@@ -10,6 +10,7 @@ describe('OcCheckbox', () => {
       }
     })
   }
+
   const checkboxSelector = "input[type='checkbox']"
 
   describe('input id', () => {
@@ -28,11 +29,12 @@ describe('OcCheckbox', () => {
       expect(checkBoxLabelElement.attributes('for')).toBe('test-id')
       expect(checkBoxLabelElement.text()).toBe('test label')
     })
-    it("should hide label if 'hideLabel' prop is enabled", () => {
-      const wrapper = getWrapperWithProps({ hideLabel: true })
+    it("should hide label if 'labelHidden' prop is enabled", () => {
+      const wrapper = getWrapperWithProps({ labelHidden: true })
       const checkBoxLabelElement = wrapper.find('label')
-      expect(checkBoxLabelElement.exists()).toBeTruthy()
-      expect(checkBoxLabelElement.attributes('class')).toContain('oc-invisible-sr')
+      expect(checkBoxLabelElement.exists()).toBeFalsy()
+      const checkboxElement = wrapper.find<HTMLInputElement>(checkboxSelector)
+      expect(checkboxElement.attributes('aria-label')).toContain('test label')
     })
     it('should have cursor pointer property if not disabled', () => {
       const wrapper = getWrapperWithProps({ disabled: false })

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

@@ -84,14 +84,6 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
-    /**
-     * Is the label of the Checkbox visually hidden?
-     **/
-    hideLabel: {
-      type: Boolean,
-      required: false,
-      default: false
-    },
     /**
      * Size of the Checkbox. Valid values are `small`, `medium` and `large`.
      * If not specified, defaults to `medium`
@@ -132,7 +124,6 @@ export default defineComponent({
     },
     labelClasses() {
       return {
-        'oc-invisible-sr': this.hideLabel,
         'oc-cursor-pointer': !this.disabled
       }
     },

packages/web-app-admin-settings/src/components/Groups/GroupsList.vue

@@ -27,7 +27,7 @@
           class="oc-ml-s"
           :label="$gettext('Select all groups')"
           :model-value="allGroupsSelected"
-          hide-label
+          :label-hidden="true"
           @update:model-value="
             allGroupsSelected ? unselectAllGroups() : selectGroups(paginatedItems)
           "
@@ -40,7 +40,7 @@
           :model-value="isGroupSelected(rowData.item)"
           :option="rowData.item"
           :label="getSelectGroupLabel(rowData.item)"
-          hide-label
+          :label-hidden="true"
           @update:model-value="selectGroup(rowData.item)"
           @click.stop="rowClicked([rowData.item, $event])"
         />

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -28,7 +28,7 @@
           class="oc-ml-s"
           :label="$gettext('Select all spaces')"
           :model-value="allSpacesSelected"
-          hide-label
+          :label-hidden="true"
           @update:model-value="
             allSpacesSelected ? unselectAllSpaces() : selectSpaces(paginatedItems)
           "
@@ -41,7 +41,7 @@
           :model-value="isSpaceSelected(item)"
           :option="item"
           :label="getSelectSpaceLabel(item)"
-          hide-label
+          :label-hidden="true"
           @update:model-value="selectSpace(item)"
           @click.stop="fileClicked([item, $event])"
         />

packages/web-app-admin-settings/src/components/Users/UsersList.vue

@@ -27,7 +27,7 @@
             class="oc-ml-s"
             :label="$gettext('Select all users')"
             :model-value="allUsersSelected"
-            hide-label
+            :label-hidden="true"
             @update:model-value="
               allUsersSelected ? unselectAllUsers() : selectUsers(paginatedItems)
             "
@@ -40,7 +40,7 @@
             :model-value="isUserSelected(item)"
             :option="item"
             :label="getSelectUserLabel(item)"
-            hide-label
+            :label-hidden="true"
             @update:model-value="selectUser(item)"
             @click.stop="rowClicked([item, $event])"
           />

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

@@ -16,7 +16,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <thead class="oc-thead">
       <tr tabindex="-1" class="oc-table-header-row">
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-select oc-pl-s" style="top: 0px;">
-          <div><span class="oc-table-thead-content"><oc-checkbox-stub id="oc-checkbox-1" disabled="false" modelvalue="false" label="Select all spaces" labelhidden="false" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub></span></div>
+          <div><span class="oc-table-thead-content"><oc-checkbox-stub id="oc-checkbox-1" disabled="false" modelvalue="false" label="Select all spaces" labelhidden="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub></span></div>
         </th>
         <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 0px;">
           <div><span class="oc-table-thead-content header-text"></span></div>
@@ -60,7 +60,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <tbody class="has-item-context-menu">
       <tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
-          <oc-checkbox-stub id="oc-checkbox-2" disabled="false" modelvalue="false" option="undefined" label="Select 1 Some space" labelhidden="false" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
+          <oc-checkbox-stub id="oc-checkbox-2" disabled="false" modelvalue="false" option="undefined" label="Select 1 Some space" labelhidden="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
         </td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="1 Some space">1 Some space</span></td>
@@ -86,7 +86,7 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
       </tr>
       <tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-2" data-item-id="2" draggable="false">
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s">
-          <oc-checkbox-stub id="oc-checkbox-3" disabled="false" modelvalue="false" option="undefined" label="Select 2 Another space" labelhidden="false" hidelabel="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
+          <oc-checkbox-stub id="oc-checkbox-3" disabled="false" modelvalue="false" option="undefined" label="Select 2 Another space" labelhidden="true" size="large" outline="false" class="oc-ml-s"></oc-checkbox-stub>
         </td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-icon"><span class="oc-icon oc-icon-m oc-icon-passive"><!----></span></td>
         <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-name mark-element"><span class="spaces-table-space-name" data-test-space-name="2 Another space">2 Another space</span></td>

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

@@ -91,7 +91,7 @@ exports[`Users view > list view > renders list initially 1`] = `
             <thead class="oc-thead">
               <tr tabindex="-1" class="oc-table-header-row">
                 <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-select oc-pl-s" style="top: 0px;">
-                  <div><span class="oc-table-thead-content"><span class="oc-ml-s"><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l"> <label for="oc-checkbox-1" class="oc-invisible-sr oc-cursor-pointer">Select all users</label></span></span></div>
+                  <div><span class="oc-table-thead-content"><span class="oc-ml-s"><input id="oc-checkbox-1" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" aria-label="Select all users"> <!--v-if--></span></span></div>
                 </th>
                 <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-text-nowrap oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 0px;">
                   <div><span class="oc-table-thead-content header-text"></span></div>
@@ -118,7 +118,7 @@ exports[`Users view > list view > renders list initially 1`] = `
             </thead>
             <tbody class="has-item-context-menu">
               <tr tabindex="-1" class="oc-tbody-tr oc-tbody-tr-1" data-item-id="1" draggable="false">
-                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s"><span class="oc-ml-s"><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="oc-checkbox-2" class="oc-invisible-sr oc-cursor-pointer">Select Admin</label></span></td>
+                <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-select oc-pl-s"><span class="oc-ml-s"><input id="oc-checkbox-2" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" aria-label="Select Admin" value="[object Object]"> <!--v-if--></span></td>
                 <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-td oc-table-data-cell oc-table-data-cell-avatar">
                   <avatar-image width="32" userid="1" user-name="Admin"></avatar-image>
                 </td>

packages/web-app-files/src/components/Search/List.vue

@@ -96,7 +96,7 @@
         </no-content-message>
         <resource-table
           v-else
-          v-model:selectedIds="selectedResourcesIds"
+          v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
           :header-position="fileListHeaderY"
           :resources="paginatedResources"

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -16,7 +16,7 @@
     </no-content-message>
     <resource-table
       v-else
-      v-model:selectedIds="selectedResourcesIds"
+      v-model:selected-ids="selectedResourcesIds"
       :is-side-bar-open="isSideBarOpen"
       :fields-displayed="displayedFields"
       :resources="resourceItems"

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

@@ -17,7 +17,7 @@
         <component
           :is="folderView.component"
           v-else
-          v-model:selectedIds="selectedResourcesIds"
+          v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
           :are-paths-displayed="true"
           :resources="paginatedResources"

packages/web-app-files/src/views/shares/SharedViaLink.vue

@@ -20,7 +20,7 @@
         </no-content-message>
         <resource-table
           v-else
-          v-model:selectedIds="selectedResourcesIds"
+          v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
           :fields-displayed="['name', 'sdate']"
           :are-paths-displayed="true"

packages/web-app-files/src/views/shares/SharedWithOthers.vue

@@ -42,7 +42,7 @@
         </no-content-message>
         <resource-table
           v-else
-          v-model:selectedIds="selectedResourcesIds"
+          v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
           :fields-displayed="['name', 'sharedWith', 'sdate']"
           :are-paths-displayed="true"

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

@@ -73,7 +73,7 @@
             <component
               :is="folderView.component"
               v-else
-              v-model:selectedIds="selectedResourcesIds"
+              v-model:selected-ids="selectedResourcesIds"
               :resources="paginatedResources"
               :view-mode="viewMode"
               :target-route-callback="resourceTargetRouteCallback"

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

@@ -22,7 +22,7 @@
         </no-content-message>
         <resource-table
           v-else
-          v-model:selectedIds="selectedResourcesIds"
+          v-model:selected-ids="selectedResourcesIds"
           :is-side-bar-open="isSideBarOpen"
           :fields-displayed="['name', 'ddate']"
           :are-paths-displayed="true"

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

@@ -56,7 +56,7 @@
           </div>
           <component
             :is="folderView.component"
-            v-model:selectedIds="selectedResourcesIds"
+            v-model:selected-ids="selectedResourcesIds"
             resource-type="space"
             :resources="paginatedItems"
             :fields-displayed="tableDisplayFields"

packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.ts.snap

@@ -30,7 +30,7 @@ exports[`Projects view > different files view states > lists all available proje
             <!--v-if-->
           </div>
         </div>
-        <div class="resource-table" selectedids="" resource-type="space" resources="[object Object],[object Object]" fields-displayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sort-by="undefined" sort-dir="desc" header-position="0" is-side-bar-open="false" view-size="NaN"></div>
+        <div class="resource-table" selected-ids="" resource-type="space" resources="[object Object],[object Object]" fields-displayed="image,name,manager,members,totalQuota,usedQuota,remainingQuota,status,mdate" sort-fields="[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]" sort-by="undefined" sort-dir="desc" header-position="0" is-side-bar-open="false" view-size="NaN"></div>
       </div>
     </div>
   </div>

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

@@ -43,7 +43,7 @@
           size="large"
           :disabled="resources.length === disabledResources.length"
           :label="allResourcesCheckboxLabel"
-          :hide-label="true"
+          :label-hidden="true"
           :model-value="areAllResourcesSelected"
           @click.stop="toggleSelectionAll"
         />
@@ -53,7 +53,7 @@
       <oc-checkbox
         :id="`resource-table-select-${resourceDomSelector(item)}`"
         :label="getResourceCheckboxLabel(item)"
-        :hide-label="true"
+        :label-hidden="true"
         size="large"
         :disabled="isResourceDisabled(item)"
         :model-value="isResourceSelected(item)"