Only display batch actions on >2 selected resources (except for trash…

…bin) and make them appear in raw
owncloud · Jun 15, 2022 · 5d45b7d · 5d45b7d
1 parent 5d6f401
commit 5d45b7d
Show file tree

Hide file tree

Showing 20 changed files with 83 additions and 44 deletions.
diff --git a/changelog/unreleased/enhancement-redesign-batchactions b/changelog/unreleased/enhancement-redesign-batchactions
@@ -0,0 +1,6 @@
+Enhancement: Redesign batchactions
+
+We have updated the batchactions to only be displayed for at least two selected resources on personal, shares and spaces views.
+This and using `raw` instead of `outline` buttons makes for a less distracting experience for the user.
+
+https://github.com/owncloud/web/pull/6351
diff --git a/packages/web-app-files/src/components/ActionMenuItem.vue b/packages/web-app-files/src/components/ActionMenuItem.vue
@@ -75,7 +75,7 @@ export default {
       }
 
       return {
-        appearance: this.appearance,
+        appearance: action.appearance ? action.appearance : this.appearance,
         ...(action.isDisabled && { disabled: action.isDisabled() }),
         ...(action.variation && { variation: action.variation })
       }

diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -33,7 +33,7 @@
       </div>
       <div class="files-app-bar-actions">
         <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px">
-          <slot v-if="showActionsOnSelection || selectedFiles.length === 0" name="actions" />
+          <slot v-if="showActionsOnSelection && areDefaultActionsVisible" name="actions" />
           <size-info v-if="showSelectionInfo" class="oc-visible@l" />
           <batch-actions v-if="showBatchActions" />
         </div>
@@ -70,6 +70,8 @@ export default {
   props: {
     breadcrumbs: { type: Array, default: () => [] },
     breadcrumbsContextActionsItems: { type: Array, default: () => [] },
+    fileCountForSizeInfo: { type: Number, default: 2 },
+    fileCountForBulkActions: { type: Number, default: 2 },
     hasBulkActions: { type: Boolean, default: false },
     hasSharesNavigation: { type: Boolean, default: false },
     hasSidebarToggle: { type: Boolean, default: true },
@@ -85,27 +87,45 @@ export default {
       return this.$gettext(title)
     },
     areDefaultActionsVisible() {
-      return this.selectedFiles.length < 1
+      return this.selectedFiles.length < this.fileCountForBulkActions
     },
     showContextActions() {
       return last(this.breadcrumbs).allowContextActions
     },
     showSelectionInfo() {
-      return this.hasBulkActions && this.selectedFiles.length > 0
+      return this.hasBulkActions && this.selectedFiles.length >= this.fileCountForSizeInfo
     },
     showBatchActions() {
-      return this.hasBulkActions
+      return this.hasBulkActions && this.selectedFiles.length >= this.fileCountForBulkActions
     },
     selectedResourcesAnnouncement() {
-      if (this.selectedFiles.length === 0) {
+      if (this.selectedFiles.length >= this.fileCountForBulkActions) {
+        if (!this.selectedFiles.length) {
+          return this.$gettext('No items selected. Actions are available above the table.')
+        }
+
+        return this.$gettextInterpolate(
+          this.$ngettext(
+            '%{ amount } item selected. Actions are available above the table.',
+            '%{ amount } items selected. Actions are available above the table.',
+            this.selectedFiles.length
+          ),
+          { amount: this.selectedFiles.length }
+        )
+      }
+
+      if (!this.selectedFiles.length) {
         return this.$gettext('No items selected.')
       }
-      const translated = this.$ngettext(
-        '%{ amount } item selected. Actions are available above the table.',
-        '%{ amount } items selected. Actions are available above the table.',
-        this.selectedFiles.length
+
+      return this.$gettextInterpolate(
+        this.$ngettext(
+          '%{ amount } item selected.',
+          '%{ amount } items selected.',
+          this.selectedFiles.length
+        ),
+        { amount: this.selectedFiles.length }
       )
-      return this.$gettextInterpolate(translated, { amount: this.selectedFiles.length })
     }
   },
 

diff --git a/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue b/packages/web-app-files/src/components/AppBar/CreateAndUpload.vue
@@ -198,7 +198,8 @@ export default defineComponent({
 
     showActions() {
       return (
-        !this.selectedFiles.length && !(this.uploadOrFileCreationBlocked && this.isPublicLocation)
+        this.selectedFiles.length < 2 &&
+        !(this.uploadOrFileCreationBlocked && this.isPublicLocation)
       )
     },
 

diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/BatchActions.vue
@@ -5,7 +5,7 @@
       :key="`batch-action-${i}`"
       :action="action"
       :items="selectedFiles"
-      appearance="outline"
+      appearance="raw"
       class="oc-mr-s"
     />
   </oc-list>
@@ -41,12 +41,6 @@ export default {
   computed: {
     ...mapGetters('Files', ['selectedFiles']),
 
-    filterParams() {
-      return {
-        resources: this.selectedFiles
-      }
-    },
-
     menuItemsBatchActions() {
       return [
         ...this.$_acceptShare_items,

diff --git a/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue b/packages/web-app-files/src/components/AppBar/SelectedResources/SizeInfo.vue
@@ -1,5 +1,15 @@
 <template>
-  <div class="oc-flex oc-flex-middle oc-text-nowrap size-info">
+  <div class="oc-pl-xs oc-flex oc-flex-middle oc-text-nowrap size-info">
+    <oc-button
+      id="files-clear-selection"
+      v-oc-tooltip="clearSelectionLabel"
+      :aria-label="clearSelectionLabel"
+      class="oc-mr-m"
+      appearance="raw"
+      @click="RESET_SELECTION"
+    >
+      <oc-icon name="close" />
+    </oc-button>
     <translate
       v-if="selectedResourcesSize !== '?'"
       key="multiple-select-info-with-size"
@@ -18,16 +28,6 @@
       translate-comment="Number of selected resources displayed above the files list"
       >%{ amount } selected
     </translate>
-    <oc-button
-      id="files-clear-selection"
-      v-oc-tooltip="clearSelectionLabel"
-      :aria-label="clearSelectionLabel"
-      class="oc-ml-m"
-      appearance="outline"
-      @click="RESET_SELECTION"
-    >
-      <oc-icon name="close" />
-    </oc-button>
   </div>
 </template>
 

diff --git a/packages/web-app-files/src/components/TrashBin.vue b/packages/web-app-files/src/components/TrashBin.vue
@@ -1,6 +1,11 @@
 <template>
   <div>
-    <app-bar :breadcrumbs="breadcrumbs" :has-bulk-actions="true" />
+    <app-bar
+      :breadcrumbs="breadcrumbs"
+      :has-bulk-actions="true"
+      :file-count-for-bulk-actions="0"
+      :file-count-for-size-info="1"
+    />
     <app-loading-spinner v-if="loadResourcesTask.isRunning" />
     <template v-else>
       <no-content-message

diff --git a/packages/web-app-files/src/mixins/actions/emptyTrashBin.js b/packages/web-app-files/src/mixins/actions/emptyTrashBin.js
@@ -10,6 +10,7 @@ export default {
     $_emptyTrashBin_items() {
       return [
         {
+          appearance: 'outline',
           name: 'empty-trash-bin',
           icon: 'delete-bin-5',
           label: () => this.$gettext('Empty trash bin'),

diff --git a/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js b/packages/web-app-files/tests/unit/components/AppBar/AppBar.spec.js
@@ -115,6 +115,8 @@ function getShallowWrapper(
   slots = {},
   props = {
     breadcrumbs: [],
+    fileCountForSizeInfo: 2,
+    fileCountForBulkActions: 2,
     hasBulkActions: false,
     hasSharesNavigation: false,
     hasSidebarToggle: true,

diff --git a/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.js.snap b/packages/web-app-files/tests/unit/components/AppBar/__snapshots__/AppBar.spec.js.snap
@@ -17,6 +17,7 @@ exports[`AppBar component renders breadcrumbs if given, by default without bread
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
   </div>
@@ -40,6 +41,7 @@ exports[`AppBar component renders breadcrumbs if given, with breadcrumbsContextA
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
   </div>
@@ -63,6 +65,7 @@ exports[`AppBar component renders breadcrumbs if given, with content in the cont
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
   </div>
@@ -110,6 +113,7 @@ exports[`AppBar component renders by default no breadcrumbs, no bulkactions, no
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
   </div>
@@ -130,7 +134,8 @@ exports[`AppBar component renders if given, with content in the actions slot 1`]
       </div>
     </div>
     <div class="files-app-bar-actions">
-      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;"><button class="action-slot">Click</button>
+      <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
+        <!---->
         <!---->
         <!---->
       </div>
@@ -156,6 +161,7 @@ exports[`AppBar component renders if given, with content in the content slot 1`]
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
     <div class="content-slot">Foo</div>
@@ -180,6 +186,7 @@ exports[`AppBar component renders sharesNavigation if enabled 1`] = `
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
   </div>
@@ -200,6 +207,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle neither if both
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
   </div>
@@ -223,6 +231,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle only sidebartogg
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
   </div>
@@ -246,6 +255,7 @@ exports[`AppBar component renders viewoptions and sidebartoggle only viewoptions
       <div class="oc-flex-1 oc-flex oc-flex-start" style="gap: 15px;">
         <!---->
         <!---->
+        <!---->
       </div>
     </div>
   </div>

diff --git a/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap b/packages/web-app-files/tests/unit/components/Search/__snapshots__/List.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`List component when no resource is found should show no-content-message component 1`] = `
 <div class="files-search-result">
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
+  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" filecountforsizeinfo="2" filecountforbulkactions="2" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
   <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty">
     <div class="oc-icon oc-icon-xxl oc-icon-passive">
       <!---->
@@ -17,7 +17,7 @@ exports[`List component when no resource is found should show no-content-message
 
 exports[`List component when no search term is entered should show no-content-message component 1`] = `
 <div class="files-search-result">
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
+  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" filecountforsizeinfo="2" filecountforbulkactions="2" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
   <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty">
     <div class="oc-icon oc-icon-xxl oc-icon-passive">
       <!---->

diff --git a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedViaLink.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`SharedViaLink view when the view is not loading anymore when there are no files to be displayed should show no-content-message component 1`] = `
 <div>
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" hassharesnavigation="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
+  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="" filecountforsizeinfo="2" filecountforbulkactions="2" hassharesnavigation="true" hassidebartoggle="true" hasviewoptions="true"></app-bar-stub>
   <div class="oc-height-1-1 oc-flex oc-flex-column oc-flex-center oc-flex-middle oc-text-center files-empty" id="files-shared-via-link-empty">
     <div class="oc-icon oc-icon-xxl oc-icon-passive">
       <!---->

diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Project.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Spaces project view space image should show if given 1`] = `
 <div class="space-overview">
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
+  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" filecountforsizeinfo="2" filecountforbulkactions="2" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
   <div>
     <div class="oc-px-m oc-mt-m oc-flex">
       <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=" class="space-overview-image oc-cursor-pointer"></div>
@@ -37,7 +37,7 @@ exports[`Spaces project view space image should show if given 1`] = `
 
 exports[`Spaces project view space readme should show if given 1`] = `
 <div class="space-overview">
-  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
+  <app-bar-stub breadcrumbs="" breadcrumbscontextactionsitems="[object Object]" filecountforsizeinfo="2" filecountforbulkactions="2" hasbulkactions="true" hassidebartoggle="true" hasviewoptions="true" showactionsonselection="true"></app-bar-stub>
   <div>
     <div class="oc-px-m oc-mt-m oc-flex">
       <div class="oc-width-1-4 oc-mr-l"><img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=" class="space-overview-image oc-cursor-pointer"></div>

diff --git a/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap b/packages/web-app-files/tests/unit/views/spaces/__snapshots__/Projects.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`Spaces projects view should list spaces 1`] = `
 <div>
-  <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" showactionsonselection="true" class="oc-border-b"></app-bar-stub>
+  <app-bar-stub breadcrumbs="[object Object]" breadcrumbscontextactionsitems="" filecountforsizeinfo="2" filecountforbulkactions="2" showactionsonselection="true" class="oc-border-b"></app-bar-stub>
   <div class="spaces-list oc-px-m oc-mt-l">
     <ul class="
           oc-grid

diff --git a/packages/web-app-user-management/tests/unit/components/Groups/CreateGroupModal.spec.js b/packages/web-app-user-management/tests/unit/components/Groups/CreateGroupModal.spec.js
@@ -1,6 +1,6 @@
 import Vuex from 'vuex'
 import { mount, createLocalVue } from '@vue/test-utils'
-import CreateGroupModal from '../../../../src/components/Groups/CreateGroupModal'
+import CreateGroupModal from '../../../../src/components/Groups/CreateGroupModal.vue'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)

diff --git a/packages/web-app-user-management/tests/unit/components/Groups/DeleteGroupModal.spec.js b/packages/web-app-user-management/tests/unit/components/Groups/DeleteGroupModal.spec.js
@@ -1,6 +1,6 @@
 import Vuex from 'vuex'
 import { mount, createLocalVue } from '@vue/test-utils'
-import DeleteGroupModal from '../../../../src/components/Groups/DeleteGroupModal'
+import DeleteGroupModal from '../../../../src/components/Groups/DeleteGroupModal.vue'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)

diff --git a/packages/web-app-user-management/tests/unit/components/Users/CreateUserModal.spec.js b/packages/web-app-user-management/tests/unit/components/Users/CreateUserModal.spec.js
@@ -1,6 +1,6 @@
 import Vuex from 'vuex'
 import { mount, createLocalVue } from '@vue/test-utils'
-import CreateUserModal from '../../../../src/components/Users/CreateUserModal'
+import CreateUserModal from '../../../../src/components/Users/CreateUserModal.vue'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)

diff --git a/packages/web-app-user-management/tests/unit/components/Users/DeleteUserModal.spec.js b/packages/web-app-user-management/tests/unit/components/Users/DeleteUserModal.spec.js
@@ -1,6 +1,6 @@
 import Vuex from 'vuex'
 import { mount, createLocalVue } from '@vue/test-utils'
-import DeleteUserModal from '../../../../src/components/Users/DeleteUserModal'
+import DeleteUserModal from '../../../../src/components/Users/DeleteUserModal.vue'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)

diff --git a/packages/web-app-user-management/tests/unit/views/Groups.spec.js b/packages/web-app-user-management/tests/unit/views/Groups.spec.js
@@ -1,7 +1,7 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { createStore } from 'vuex-extensions'
 import Vuex from 'vuex'
-import Groups from '../../../src/views/Groups'
+import Groups from '../../../src/views/Groups.vue'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)

diff --git a/packages/web-app-user-management/tests/unit/views/Users.spec.js b/packages/web-app-user-management/tests/unit/views/Users.spec.js
@@ -1,6 +1,6 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils'
 import { createStore } from 'vuex-extensions'
-import Users from '../../../src/views/Users'
+import Users from '../../../src/views/Users.vue'
 import Vuex from 'vuex'
 import mockAxios from 'jest-mock-axios'