Batch actions active if one resource is selected

changelog/unreleased/enhancement-batch-actions-redesign

@@ -0,0 +1,9 @@
+Enhancement: Batch actions redesign
+
+We've improved the overall look and feel of the top bar batch actions.
+This includes the new mechanism that the batch actions show up as well when only one item is selected,
+but also includes design changes.
+
+https://github.com/owncloud/web/pull/9346
+https://github.com/owncloud/web/issues/9340
+https://github.com/owncloud/web/issues/9352

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -35,11 +35,13 @@
               </oc-button>
             </div>
           </div>
-          <div class="oc-flex oc-flex-middle oc-mt-xs">
+          <div
+            v-if="showAppBar"
+            class="admin-settings-app-bar-actions oc-flex oc-flex-middle oc-mt-xs"
+          >
             <slot name="topbarActions" class="oc-flex-1 oc-flex oc-flex-start" />
             <batch-actions
               v-if="showBatchActions"
-              class="oc-ml-s"
               :actions="batchActions"
               :action-options="{ resources: batchActionItems }"
               :limited-screen-space="limitedScreenSpace"
@@ -149,6 +151,11 @@ export default defineComponent({
       type: Array as PropType<any>,
       required: false,
       default: () => []
+    },
+    showAppBar: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   setup(props) {

packages/web-app-admin-settings/src/views/General.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <app-template ref="template" :breadcrumbs="breadcrumbs">
+    <app-template ref="template" :breadcrumbs="breadcrumbs" :show-app-bar="false">
       <template #mainContent>
         <div class="oc-px-m">
           <InfoSection />

packages/web-app-admin-settings/src/views/Groups.vue

@@ -13,26 +13,17 @@
       :show-view-options="true"
     >
       <template #topbarActions>
-        <div class="admin-settings-app-bar-actions">
-          <div v-if="selectedGroups.length" class="oc-flex oc-flex-middle">
-            <span v-text="selectedGroupsText" />
-            <oc-button
-              id="groups-clear-selection"
-              v-oc-tooltip="$gettext('Clear selection')"
-              :aria-label="$gettext('Clear selection')"
-              class="oc-ml-m oc-py-s"
-              appearance="outline"
-              @click="unselectAllGroups"
-            >
-              <oc-icon name="close" />
-            </oc-button>
-          </div>
-          <div v-else>
-            <oc-button variation="primary" appearance="filled" @click="toggleCreateGroupModal">
-              <oc-icon name="add" />
-              <span v-text="$gettext('New group')" />
-            </oc-button>
-          </div>
+        <div>
+          <oc-button
+            id="create-group-btn"
+            class="oc-mr-s"
+            variation="primary"
+            appearance="filled"
+            @click="toggleCreateGroupModal"
+          >
+            <oc-icon name="add" />
+            <span v-text="$gettext('New group')" />
+          </oc-button>
         </div>
       </template>
       <template #mainContent>

packages/web-app-admin-settings/src/views/Spaces.vue

@@ -20,22 +20,6 @@
           class="sidebar-panel__space_info"
         />
       </template>
-      <template #topbarActions>
-        <div class="admin-settings-app-bar-actions">
-          <div v-if="selectedSpaces.length >= 1" class="oc-flex oc-flex-middle">
-            <oc-button
-              id="spaces-clear-selection"
-              v-oc-tooltip="$gettext('Clear selection')"
-              :aria-label="$gettext('Clear selection')"
-              class="oc-py-s"
-              appearance="outline"
-              @click="unselectAllSpaces"
-            >
-              <oc-icon name="close" />
-            </oc-button>
-          </div>
-        </div>
-      </template>
       <template #mainContent>
         <quota-modal
           v-if="quotaModalIsOpen"

packages/web-app-admin-settings/src/views/Users.vue

@@ -13,32 +13,18 @@
       :show-view-options="true"
     >
       <template #topbarActions>
-        <div class="admin-settings-app-bar-actions">
-          <div v-if="selectedUsers.length" class="oc-flex oc-flex-middle">
-            <span v-text="selectedUsersText" />
-            <oc-button
-              id="users-clear-selection"
-              v-oc-tooltip="$gettext('Clear selection')"
-              :aria-label="$gettext('Clear selection')"
-              class="oc-ml-m oc-py-s"
-              appearance="outline"
-              @click="unselectAllUsers"
-            >
-              <oc-icon name="close" />
-            </oc-button>
-          </div>
-          <div v-else>
-            <oc-button
-              v-if="!createUsersDisabled"
-              variation="primary"
-              appearance="filled"
-              data-test-id="create-user-btn"
-              @click="toggleCreateUserModal"
-            >
-              <oc-icon name="add" />
-              <span v-text="$gettext('New user')" />
-            </oc-button>
-          </div>
+        <div>
+          <oc-button
+            v-if="!createUsersDisabled"
+            id="create-user-btn"
+            class="oc-mr-s"
+            variation="primary"
+            appearance="filled"
+            @click="toggleCreateUserModal"
+          >
+            <oc-icon name="add" />
+            <span v-text="$gettext('New user')" />
+          </oc-button>
         </div>
       </template>
       <template #mainContent>

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

@@ -90,7 +90,7 @@ const getClientService = () => {
 const selectors = {
   itemFilterGroupsStub: 'item-filter-stub[filtername="groups"]',
   itemFilterRolesStub: 'item-filter-stub[filtername="roles"]',
-  createUserButton: '[data-test-id="create-user-btn"]'
+  createUserButton: '#create-user-btn'
 }
 
 describe('Users view', () => {

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

@@ -66,9 +66,6 @@ exports[`Spaces view loading states should render spaces list after loading has
           </div>
         </div>
         <div class="oc-flex oc-flex-middle oc-mt-xs">
-          <div class="admin-settings-app-bar-actions">
-            <!--v-if-->
-          </div>
           <!--v-if-->
         </div>
       </div>

packages/web-app-files/src/components/AppBar/AppBar.vue

@@ -47,12 +47,8 @@
         </div>
       </div>
       <div class="files-app-bar-actions oc-mt-xs">
-        <div class="oc-flex-1 oc-flex oc-flex-start">
-          <slot
-            v-if="!selectedFiles.length || (showActionsOnSelection && selectedFiles.length === 1)"
-            name="actions"
-            :limited-screen-space="limitedScreenSpace"
-          />
+        <div class="oc-flex-1 oc-flex oc-flex-start oc-flex-middle">
+          <slot name="actions" :limited-screen-space="limitedScreenSpace" />
           <batch-actions
             v-if="showBatchActions"
             :actions="batchActions"
@@ -85,7 +81,6 @@ import SidebarToggle from './SidebarToggle.vue'
 import { ViewMode } from 'web-pkg/src/ui/types'
 import {
   useFileActionsAcceptShare,
-  useFileActionsClearSelection,
   useFileActionsCopy,
   useFileActionsDeclineShare,
   useFileActionsDelete,
@@ -95,7 +90,7 @@ import {
   useFileActionsMove,
   useFileActionsRestore
 } from 'web-app-files/src/composables/actions'
-import { useClientService, useRouter, useRouteMeta, useStore } from 'web-pkg/src'
+import { useRouteMeta, useStore } from 'web-pkg/src'
 import { BreadcrumbItem } from 'design-system/src/components/OcBreadcrumb/types'
 import { useActiveLocation } from 'web-app-files/src/composables'
 import { EVENT_ITEM_DROPPED } from 'design-system/src/helpers'
@@ -140,12 +135,9 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const store = useStore()
-    const router = useRouter()
-    const clientService = useClientService()
     const { $gettext } = useGettext()
 
     const { actions: acceptShareActions } = useFileActionsAcceptShare({ store })
-    const { actions: clearSelectionActions } = useFileActionsClearSelection({ store })
     const { actions: copyActions } = useFileActionsCopy({ store })
     const { actions: declineShareActions } = useFileActionsDeclineShare({ store })
     const { actions: deleteActions } = useFileActionsDelete({ store })
@@ -159,7 +151,6 @@ export default defineComponent({
 
     const batchActions = computed(() => {
       return [
-        ...unref(clearSelectionActions),
         ...unref(acceptShareActions),
         ...unref(declineShareActions),
         ...unref(downloadArchiveActions),
@@ -244,7 +235,7 @@ export default defineComponent({
     showBatchActions() {
       return (
         this.hasBulkActions &&
-        (this.selectedFiles.length > 1 ||
+        (this.selectedFiles.length >= 1 ||
           isLocationTrashActive(this.$router, 'files-trash-generic'))
       )
     },

packages/web-app-files/src/components/AppBar/CreateAndUpload.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="showActions" class="create-and-upload-actions oc-flex-inline oc-width-1-1">
+  <div v-if="showActions" class="create-and-upload-actions oc-flex-inline oc-mr-s">
     <template v-if="createFileActionsAvailable">
       <span v-oc-tooltip="newButtonTooltip">
         <oc-button

packages/web-app-files/src/composables/actions/files/index.ts

@@ -1,5 +1,4 @@
 export * from './useFileActionsAcceptShare'
-export * from './useFileActionsClearSelection'
 export * from './useFileActionsCopy'
 export * from './useFileActionsCreateQuicklink'
 export * from './useFileActionsDeclineShare'

packages/web-app-files/src/composables/actions/files/useFileActionsEmptyTrashBin.ts

@@ -13,7 +13,7 @@ import {
   useStore
 } from 'web-pkg/src/composables'
 import { useGettext } from 'vue3-gettext'
-import { ActionOptions, FileAction, FileActionOptions } from 'web-pkg/src/composables/actions'
+import { FileAction, FileActionOptions } from 'web-pkg/src/composables/actions'
 
 export const useFileActionsEmptyTrashBin = ({ store }: { store?: Store<any> } = {}) => {
   store = store || useStore()
@@ -91,13 +91,12 @@ export const useFileActionsEmptyTrashBin = ({ store }: { store?: Store<any> } =
           return false
         }
 
-        // empty trash bin is not available for individual resources, but only for the trash bin as a whole
-        return resources.length === 0
+        return true
       },
-      isDisabled: ({ resources }: ActionOptions) => store.getters['Files/activeFiles'].length === 0,
       componentType: 'button',
       class: 'oc-files-actions-empty-trash-bin-trigger',
-      variation: 'danger'
+      variation: 'danger',
+      appearance: 'filled'
     }
   ])
 

packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.ts

@@ -94,10 +94,6 @@ describe('AppBar component', () => {
         )
         expect(wrapper.find(selectors.batchActionsStub).exists()).toBeTruthy()
       })
-      it('not if 1 file selected', () => {
-        const { wrapper } = getShallowWrapper([selectedFiles[0]], {}, { hasBulkActions: true })
-        expect(wrapper.find(selectors.batchActionsStub).exists()).toBeFalsy()
-      })
     })
     describe('mobile navigation portal', () => {
       it.each([

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

@@ -15,7 +15,7 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">
-      <div class="oc-flex-1 oc-flex oc-flex-start">
+      <div class="oc-flex-1 oc-flex oc-flex-start oc-flex-middle">
         <!--v-if-->
       </div>
     </div>
@@ -38,7 +38,7 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">
-      <div class="oc-flex-1 oc-flex oc-flex-start">
+      <div class="oc-flex-1 oc-flex oc-flex-start oc-flex-middle">
         <button class="action-slot">Click</button>
         <!--v-if-->
       </div>
@@ -62,7 +62,7 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
       </div>
     </div>
     <div class="files-app-bar-actions oc-mt-xs">
-      <div class="oc-flex-1 oc-flex oc-flex-start">
+      <div class="oc-flex-1 oc-flex oc-flex-start oc-flex-middle">
         <!--v-if-->
       </div>
     </div>

packages/web-app-files/tests/unit/components/AppBar/__snapshots__/CreateAndUpload.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CreateAndUpload component action buttons should show and be enabled if file creation is possible 1`] = `
-<div class="create-and-upload-actions oc-flex-inline oc-width-1-1">
+<div class="create-and-upload-actions oc-flex-inline oc-mr-s">
   <span>
     <button aria-label="Create a new folder" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-folder-btn" type="button">
       <!-- @slot Content of the button -->
@@ -32,7 +32,7 @@ exports[`CreateAndUpload component action buttons should show and be enabled if
 `;
 
 exports[`CreateAndUpload component file handlers should show additional handlers 1`] = `
-<div class="create-and-upload-actions oc-flex-inline oc-width-1-1">
+<div class="create-and-upload-actions oc-flex-inline oc-mr-s">
   <span>
     <button aria-label="Create new files or folders" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-primary oc-button-primary-filled" id="new-file-menu-btn" type="button">
       <!-- @slot Content of the button -->