Handle processing items

changelog/unreleased/enhancement-indicate-processig-state

@@ -0,0 +1,8 @@
+Enhancement: Indicate processing state
+
+If a file has been just recently uploaded, it might go trough a processing state (e.G virus scan).
+If so, no actions on this resource is possible, therefore we show now the processing state and make
+the temporary restrictions clear to the user.
+
+https://github.com/owncloud/web/pull/9561
+https://github.com/owncloud/web/issues/9558

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

@@ -1,5 +1,5 @@
 <template>
-  <table v-bind="extractTableProps()">
+  <table v-bind="extractTableProps()" class="has-item-context-menu">
     <oc-thead v-if="hasHeader">
       <oc-tr class="oc-table-header-row">
         <oc-th
@@ -596,7 +596,8 @@ export default defineComponent({
 
   &-disabled {
     background-color: var(--oc-color-background-muted);
-    opacity: 0.8;
+    opacity: 0.7;
+    filter: grayscale(0.6);
     pointer-events: none;
   }
 

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

@@ -4,6 +4,7 @@
     :data-item-id="resource.id"
     :class="{
       'oc-tile-card-selected': isResourceSelected,
+      'oc-tile-card-disabled': resource.processing,
       'state-trashed': resource.disabled
     }"
     @contextmenu="$emit('contextmenu', $event)"
@@ -125,6 +126,13 @@ export default defineComponent({
   flex-flow: column;
   outline: 1px solid var(--oc-color-border);
 
+  &-disabled {
+    pointer-events: none;
+    background-color: var(--oc-color-background-muted) !important;
+    opacity: 0.7;
+    filter: grayscale(0.6);
+  }
+
   &.state-trashed {
     cursor: pointer;
 

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

@@ -11,7 +11,7 @@ exports[`SpacesList should render all spaces in a table 1`] = `
     </div>
     <!--v-if-->
   </div>
-  <table class="oc-table oc-table-hover oc-table-sticky spaces-table">
+  <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table">
     <thead class="oc-thead">
       <tr class="oc-table-header-row" tabindex="-1">
         <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;">

packages/web-app-files/src/components/FilesList/ResourceTable.vue

@@ -7,7 +7,7 @@
     :data="resources"
     :fields="fields"
     :highlighted="selectedIds"
-    :disabled="disabled"
+    :disabled="disabledResources"
     :sticky="true"
     :header-position="headerPosition"
     :drag-drop="dragDrop"
@@ -209,7 +209,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, unref, ref } from 'vue'
+import { defineComponent, PropType, computed, unref, ref, ComputedRef } from 'vue'
 import { mapGetters, mapActions, mapState } from 'vuex'
 import { basename, dirname } from 'path'
 import { useWindowSize } from '@vueuse/core'
@@ -351,7 +351,7 @@ export default defineComponent({
      * The ids of disabled resources. Null or an empty string/array for no disabled resources.
      */
     disabled: {
-      type: [String, Array],
+      type: [String, Array] as PropType<Array<Resource['id']>>,
       required: false,
       default: null
     },
@@ -458,12 +458,31 @@ export default defineComponent({
 
     const getTagToolTip = (text: string) => (text.length > 7 ? text : '')
 
+    const disabledResources: ComputedRef<Array<Resource['id']>> = computed(() => {
+      let disabled = props.disabled
+
+      if (disabled) {
+        if (!Array.isArray(disabled)) {
+          disabled = [disabled]
+        }
+
+        return disabled
+      }
+
+      return (
+        props.resources
+          ?.filter((resource) => resource.processing === true)
+          ?.map((resource) => resource.id) || []
+      )
+    })
+
     return {
       getTagToolTip,
       renameActions,
       renameHandler,
       ViewModeConstants,
       hasTags,
+      disabledResources,
       hasShareJail: useCapabilityShareJailEnabled(),
       hasProjectSpaces: useCapabilityProjectSpacesEnabled(),
       isUserContext: useUserContext({ store }),
@@ -683,7 +702,7 @@ export default defineComponent({
       return this.configuration?.options?.displayResourcesLazy
     },
     areAllResourcesSelected() {
-      return this.selectedResources.length === this.resources.length
+      return this.selectedResources.length === this.resources.length - this.disabledResources.length
     },
     selectedResources() {
       return this.resources.filter((resource) => this.selectedIds.includes(resource.id))
@@ -883,7 +902,11 @@ export default defineComponent({
       if (this.areAllResourcesSelected) {
         return this.emitSelect([])
       }
-      this.emitSelect(this.resources.map((resource) => resource.id))
+      this.emitSelect(
+        this.resources
+          .filter((resource) => !this.disabledResources.includes(resource.id))
+          .map((resource) => resource.id)
+      )
     },
     emitFileClick(resource) {
       const space = this.getMatchingSpace(resource)
@@ -898,9 +921,8 @@ export default defineComponent({
       if (!this.areResourcesClickable) {
         return false
       }
-      return Array.isArray(this.disabled)
-        ? !this.disabled.includes(resourceId)
-        : this.disabled !== resourceId
+
+      return !this.disabledResources.includes(resourceId)
     },
     getResourceCheckboxLabel(resource) {
       if (resource.type === 'folder') {

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

@@ -3,6 +3,7 @@
     :type="resource.isFolder ? 'router-link' : 'button'"
     justify-content="left"
     class="files-search-preview oc-flex oc-width-1-1"
+    :class="{ 'files-search-preview-disabled': resource.processing }"
     appearance="raw"
     v-bind="attrs"
     v-on="listeners"
@@ -205,8 +206,14 @@ export default defineComponent({
   }
 })
 </script>
-<style lang="scss">
+
+<style lang="scss" scoped>
 .files-search-preview {
-  font-size: inherit;
+  &-disabled {
+    pointer-events: none;
+    background-color: var(--oc-color-background-muted);
+    opacity: 0.7;
+    filter: grayscale(0.6);
+  }
 }
 </style>

packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts

@@ -36,7 +36,8 @@ export const useKeyboardTableMouseActions = (
 
     for (let i = minIndex; i <= maxIndex; i++) {
       const nodeId = resourceNodes[i].getAttribute('data-item-id')
-      if (skipTargetSelection && nodeId === resource.id) {
+      const isDisabled = resourceNodes[i].classList.contains('oc-table-disabled')
+      if ((skipTargetSelection && nodeId === resource.id) || isDisabled) {
         continue
       }
       store.commit('Files/ADD_FILE_SELECTION', { id: nodeId })
@@ -59,7 +60,9 @@ export const useKeyboardTableMouseActions = (
 
     for (let i = minIndex; i <= maxIndex; i++) {
       const nodeId = tilesListCard[i].getAttribute('data-item-id')
-      if (skipTargetSelection && nodeId === resource.id) {
+      const isDisabled = tilesListCard[i].classList.contains('oc-tile-card-disabled')
+
+      if ((skipTargetSelection && nodeId === resource.id) || isDisabled) {
         continue
       }
       store.commit('Files/ADD_FILE_SELECTION', { id: nodeId })

packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts

@@ -131,7 +131,17 @@ export const useKeyboardTableNavigation = (
     if (latestSelectedResourceIndex === -1) {
       return -1
     }
-    const nextResourceIndex = latestSelectedResourceIndex + (previous ? -movedBy : movedBy)
+
+    const step = previous ? -movedBy : movedBy
+    let nextResourceIndex = latestSelectedResourceIndex + step
+
+    while (nextResourceIndex >= 0 && nextResourceIndex < paginatedResources.value.length) {
+      if (paginatedResources.value[nextResourceIndex].processing !== true) {
+        return paginatedResources.value[nextResourceIndex].id
+      }
+      nextResourceIndex += step
+    }
+
     if (nextResourceIndex < 0 || nextResourceIndex >= paginatedResources.value.length) {
       return -1
     }
@@ -162,7 +172,10 @@ export const useKeyboardTableNavigation = (
 
   const handleSelectAllAction = () => {
     keyActions.resetSelectionCursor()
-    store.commit('Files/SET_FILE_SELECTION', paginatedResources.value)
+    store.commit(
+      'Files/SET_FILE_SELECTION',
+      unref(paginatedResources).filter((resource) => resource.processing !== true)
+    )
   }
 
   const getVerticalProperties = (viewDirection: Direction) => {

packages/web-app-files/src/composables/scrollTo/useScrollTo.ts

@@ -50,7 +50,7 @@ export const useScrollTo = (): ScrollToResult => {
     }
 
     const resource = unref(resources).find((r) => r.id === unref(scrollTo))
-    if (resource) {
+    if (resource && resource.processing !== true) {
       store.commit('Files/SET_FILE_SELECTION', [resource])
       scrollToResource(resource.id, { forceScroll: true })
 

packages/web-app-files/src/helpers/resources.ts

@@ -168,7 +168,8 @@ export function buildSharedResource(
     indicators: [],
     tags: [],
     path: undefined,
-    webDavPath: undefined
+    webDavPath: undefined,
+    processing: share.processing || false
   }
 
   if (incomingShares) {

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

@@ -14,7 +14,7 @@ exports[`TrashOverview view states should render spaces list 1`] = `
         </div>
         <!--v-if-->
       </div>
-      <table class="oc-table oc-table-hover oc-table-sticky spaces-table">
+      <table class="oc-table oc-table-hover oc-table-sticky has-item-context-menu spaces-table">
         <thead class="oc-thead">
           <tr class="oc-table-header-row" tabindex="-1">
             <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 oc-pl-s" style="top: 0px;">

packages/web-app-search/src/portals/SearchBar.vue

@@ -570,21 +570,24 @@ export default defineComponent({
     }
 
     ul {
-      li.provider {
-        padding: 0;
+      li.provider-details,
+      li.loading,
+      li#no-results {
+        padding: var(--oc-space-xsmall) var(--oc-space-small);
       }
 
       li {
-        padding: var(--oc-space-xsmall) var(--oc-space-small);
         position: relative;
         font-size: var(--oc-font-size-small);
 
         &.provider-details {
           font-size: var(--oc-font-size-xsmall);
         }
 
-        &.preview {
+        &.preview > * {
           min-height: 44px;
+          font-size: inherit;
+          padding: var(--oc-space-xsmall) var(--oc-space-small);
 
           &:hover,
           &.active {

packages/web-client/src/helpers/resource/functions.ts

@@ -85,7 +85,6 @@ export function buildResource(resource): Resource {
   if (!resourcePath.startsWith('/')) {
     resourcePath = `/${resourcePath}`
   }
-
   const id = resource.fileInfo[DavProperty.FileId]
   const r = {
     id,