From 84ac435d18818b65ce26990269c294f5707b88b6 Mon Sep 17 00:00:00 2001
From: Jan <j.ackermann91@gmail.com>
Date: Wed, 16 Aug 2023 13:39:42 +0200
Subject: [PATCH] Handle processing items (#9561)

---
 .../enhancement-indicate-processig-state      |  8 ++++
 .../src/components/OcTable/OcTable.vue        |  5 ++-
 .../src/components/OcTile/OcTile.vue          |  8 ++++
 .../__snapshots__/SpacesList.spec.ts.snap     |  2 +-
 .../components/FilesList/ResourceTable.vue    | 38 +++++++++++++++----
 .../src/components/Search/Preview.vue         | 11 +++++-
 .../useKeyboardTableMouseActions.ts           |  7 +++-
 .../useKeyboardTableNavigation.ts             | 17 ++++++++-
 .../src/composables/scrollTo/useScrollTo.ts   |  2 +-
 .../web-app-files/src/helpers/resources.ts    |  3 +-
 .../trash/__snapshots__/Overview.spec.ts.snap |  2 +-
 .../web-app-search/src/portals/SearchBar.vue  | 11 ++++--
 .../src/helpers/resource/functions.ts         |  1 -
 13 files changed, 90 insertions(+), 25 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-indicate-processig-state

diff --git a/changelog/unreleased/enhancement-indicate-processig-state b/changelog/unreleased/enhancement-indicate-processig-state
new file mode 100644
index 00000000000..e2ac6cddd23
--- /dev/null
+++ b/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
diff --git a/packages/design-system/src/components/OcTable/OcTable.vue b/packages/design-system/src/components/OcTable/OcTable.vue
index 8a9246c9a90..a731c4e98d2 100644
--- a/packages/design-system/src/components/OcTable/OcTable.vue
+++ b/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;
   }
 
diff --git a/packages/design-system/src/components/OcTile/OcTile.vue b/packages/design-system/src/components/OcTile/OcTile.vue
index fbbb426fec8..b384f889173 100644
--- a/packages/design-system/src/components/OcTile/OcTile.vue
+++ b/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)"
@@ -130,6 +131,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;
 
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index eefe8693391..d24bd14b6e3 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/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;">
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index f622668a58c..29242369702 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/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') {
diff --git a/packages/web-app-files/src/components/Search/Preview.vue b/packages/web-app-files/src/components/Search/Preview.vue
index 7af8a8b96c2..f54c617f196 100644
--- a/packages/web-app-files/src/components/Search/Preview.vue
+++ b/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>
diff --git a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts b/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts
index 270e85b99cb..b9d898aa9ff 100644
--- a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableMouseActions.ts
+++ b/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 })
diff --git a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts b/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts
index d0f4d8f6568..c80dcdd2ccd 100644
--- a/packages/web-app-files/src/composables/keyboardActions/useKeyboardTableNavigation.ts
+++ b/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) => {
diff --git a/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts b/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts
index 9362c44f462..1a7aaa5044a 100644
--- a/packages/web-app-files/src/composables/scrollTo/useScrollTo.ts
+++ b/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 })
 
diff --git a/packages/web-app-files/src/helpers/resources.ts b/packages/web-app-files/src/helpers/resources.ts
index b270d5b115a..900c40ea7a4 100644
--- a/packages/web-app-files/src/helpers/resources.ts
+++ b/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) {
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index b724ecdcca8..1809d454645 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/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;">
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index bb12f9db29b..20b059ff01d 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -570,12 +570,13 @@ 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);
 
@@ -583,8 +584,10 @@ export default defineComponent({
           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 {
diff --git a/packages/web-client/src/helpers/resource/functions.ts b/packages/web-client/src/helpers/resource/functions.ts
index 7346d5ae83d..84bb928a3d5 100644
--- a/packages/web-client/src/helpers/resource/functions.ts
+++ b/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,