[full-ci] Tags

.drone.env

@@ -1,3 +1,3 @@
 # The version of OCIS to use in pipelines that test against OCIS
-OCIS_COMMITID=58a88456856364a631eaf7f7b74105c708362632
+OCIS_COMMITID=f99a2072d33debc7fda43f9b27ba48c01014a83b
 OCIS_BRANCH=experimental

changelog/unreleased/enhancement-tags-support

@@ -0,0 +1,9 @@
+Enhancement: Add Tag support
+
+Managing files via tags is now possible in web, the feature is experimental and will be only available through a dedicated experimental web build.
+Beside that the web version is experimental, it also needs a special experimental ocis version.
+
+Creating Tags, tagging resources and search for tags now is possible and can be used as an alternative way of working and organizing resources.
+
+https://github.com/owncloud/web/pull/7388
+https://github.com/owncloud/web/pull/7385

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

@@ -22,6 +22,7 @@ import Rename from '../../mixins/actions/rename'
 import Restore from '../../mixins/actions/restore'
 import ShowActions from '../../mixins/actions/showActions'
 import ShowDetails from '../../mixins/actions/showDetails'
+import ShowEditTags from '../../mixins/actions/showEditTags'
 import ShowShares from '../../mixins/actions/showShares'
 import SetSpaceImage from '../../mixins/spaces/actions/setImage'
 import SetSpaceReadme from '../../mixins/spaces/actions/setReadme'
@@ -50,6 +51,7 @@ export default {
     Restore,
     ShowActions,
     ShowDetails,
+    ShowEditTags,
     ShowShares,
     SetSpaceImage,
     SetSpaceReadme,
@@ -152,6 +154,7 @@ export default {
         ...this.$_copy_items,
         ...this.$_paste_items,
         ...this.$_rename_items,
+        ...this.$_showEditTags_items,
         ...this.$_restore_items,
         ...this.$_acceptShare_items,
         ...this.$_declineShare_items,

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

@@ -416,7 +416,7 @@ export default defineComponent({
     }
   },
   computed: {
-    ...mapGetters(['configuration']),
+    ...mapGetters(['configuration', 'capabilities']),
     ...mapState('Files', [
       'areFileExtensionsShown',
       'latestSelectedId',
@@ -488,13 +488,15 @@ export default defineComponent({
             alignH: 'right',
             wrap: 'nowrap'
           },
-          {
-            name: 'tags',
-            title: this.$gettext('Tags'),
-            type: 'slot',
-            alignH: 'right',
-            wrap: 'nowrap'
-          },
+          this.capabilities?.files?.tags
+            ? {
+                name: 'tags',
+                title: this.$gettext('Tags'),
+                type: 'slot',
+                alignH: 'right',
+                wrap: 'nowrap'
+              }
+            : {},
           {
             name: 'owner',
             title: this.$gettext('Share owner'),
@@ -589,12 +591,13 @@ export default defineComponent({
   },
   methods: {
     ...mapActions('Files/sidebar', ['openWithPanel']),
+    ...mapActions('Files/sidebar', { openSidebar: 'open' }),
     isResourceSelected(item) {
       return this.selectedIds.includes(item.id)
     },
     getTagLink(tag) {
       return createLocationCommon('files-common-search', {
-        query: { term: `tag:${tag}`, provider: 'files.sdk' }
+        query: { term: `Tags:${tag}`, provider: 'files.sdk' }
       })
     },
     isResourceCut(resource) {
@@ -612,7 +615,7 @@ export default defineComponent({
       this.$_rename_trigger({ resources: [item] })
     },
     openTagsSidebar() {
-      this.openWithPanel('tags-item')
+      this.openSidebar()
     },
     openSharingSidebar(file) {
       if (file.share?.shareType === ShareTypes.link.value) {

packages/web-app-files/src/components/SideBar/Details/FileDetails.vue

@@ -140,6 +140,17 @@
             </div>
           </td>
         </tr>
+        <tr v-if="showTags" data-testid="tags">
+          <th scope="col" class="oc-pr-s" v-text="tagsLabel" />
+          <td>
+            <router-link v-for="(tag, index) in file.tags" :key="tag" :to="getTagLink(tag)">
+              <span>
+                <span v-if="index + 1 < file.tags.length" class="oc-mr-xs">{{ tag }},</span>
+                <span v-else v-text="tag" />
+              </span>
+            </router-link>
+          </td>
+        </tr>
       </table>
     </div>
     <p v-else data-testid="noContentText" v-text="noContentText" />
@@ -154,8 +165,9 @@ import { ImageDimension } from '../../../constants'
 import { loadPreview } from 'web-pkg/src/helpers/preview'
 import upperFirst from 'lodash-es/upperFirst'
 import path from 'path'
-import { createLocationSpaces, isLocationSpacesActive } from '../../../router'
+import { createLocationSpaces, isLocationSpacesActive, createLocationCommon } from '../../../router'
 import { ShareTypes } from 'web-client/src/helpers/share'
+
 import {
   useAccessToken,
   usePublicLinkContext,
@@ -212,7 +224,7 @@ export default defineComponent({
   }),
   computed: {
     ...mapGetters('Files', ['versions', 'sharesTree', 'sharesTreeLoading']),
-    ...mapGetters(['user', 'configuration']),
+    ...mapGetters(['user', 'configuration', 'capabilities']),
 
     file() {
       return this.displayedItem.value
@@ -334,6 +346,12 @@ export default defineComponent({
       const displayDate = this.formDateFromHTTP(this.file.mdate)
       return upperFirst(displayDate)
     },
+    showTags() {
+      return this.capabilities?.files.tags && this.file.tags?.length
+    },
+    tagsLabel() {
+      return this.$gettext('Tags')
+    },
     hasAnyShares() {
       return (
         this.file.shareTypes?.length > 0 ||
@@ -462,6 +480,11 @@ export default defineComponent({
         this.copiedDirect = false
         this.copiedEos = false
       }, 550)
+    },
+    getTagLink(tag) {
+      return createLocationCommon('files-common-search', {
+        query: { term: `Tags:${tag}`, provider: 'files.sdk' }
+      })
     }
   }
 })
@@ -476,6 +499,7 @@ export default defineComponent({
     td {
       max-width: 0;
       width: 100%;
+      overflow-wrap: break-word;
 
       div {
         min-width: 0;

packages/web-app-files/src/components/SideBar/TagsPanel.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <div class="oc-background-highlight oc-p-m">
+      <oc-loader v-if="loadAllTagsTask.isRunning" />
+      <oc-select
+        v-else
+        ref="tagSelect"
+        v-model="editAssignedTags"
+        multiple
+        :options="allTags"
+        taggable
+        push-tags
+        :label="$gettext('Add or edit tags')"
+        :create-option="createOption"
+        :selectable="() => editAssignedTags.length <= tagsMaxCount"
+        :fix-message-line="true"
+      >
+        <template #selected-option="{ label }">
+          <span class="oc-flex oc-flex-center">
+            <avatar-image
+              class="oc-flex oc-align-self-center oc-mr-s"
+              :width="16.8"
+              :userid="label"
+              :user-name="label"
+            />
+            <span>{{ label }}</span>
+          </span>
+        </template>
+        <template #option="{ label }">
+          <div class="oc-flex">
+            <span v-if="showSelectNewLabel(label)" v-translate class="oc-mr-s">New</span>
+            <span class="oc-flex oc-flex-center">
+              <avatar-image
+                class="oc-flex oc-align-self-center oc-mr-s"
+                :width="16.8"
+                :userid="label"
+                :user-name="label"
+              />
+              <span>{{ label }}</span>
+            </span>
+          </div>
+        </template>
+      </oc-select>
+    </div>
+    <compare-save-dialog
+      class="edit-compare-save-dialog"
+      :original-object="{ tags: resource.tags }"
+      :compare-object="{ tags: editAssignedTags }"
+      @revert="revertChanges"
+      @confirm="save"
+    ></compare-save-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { mapActions, mapMutations } from 'vuex'
+import { defineComponent, ref } from '@vue/composition-api'
+import CompareSaveDialog from 'web-pkg/src/components/sidebar/CompareSaveDialog.vue'
+import { bus } from 'web-pkg/src/instance'
+import { useTask } from 'vue-concurrency'
+import { useRequest, useStore } from 'web-pkg/src/composables'
+
+const tagsMaxCount = 100
+
+export default defineComponent({
+  name: 'Tags',
+  components: {
+    CompareSaveDialog
+  },
+  inject: ['displayedItem'],
+  setup() {
+    const store = useStore()
+    const allTags = ref([])
+    const { makeRequest } = useRequest()
+    const loadAllTagsTask = useTask(function* (signal, ref) {
+      const {
+        data: { tags = [] }
+      } = yield makeRequest('GET', `${store.getters.configuration.server}experimental/tags`, {})
+      allTags.value = tags
+    })
+
+    return {
+      loadAllTagsTask,
+      allTags,
+      tagsMaxCount
+    }
+  },
+  data: function () {
+    return {
+      editAssignedTags: []
+    }
+  },
+  computed: {
+    resource() {
+      return this.displayedItem.value
+    }
+  },
+  mounted() {
+    this.editAssignedTags = [...this.resource.tags]
+    this.loadAllTagsTask.perform(this)
+  },
+  methods: {
+    ...mapActions(['showMessage']),
+    ...mapMutations('Files', ['UPDATE_RESOURCE_FIELD']),
+
+    revertChanges() {
+      this.editAssignedTags = [...this.resource.tags]
+    },
+    async save() {
+      try {
+        const tagsToAdd = this.editAssignedTags.filter((tag) => !this.resource.tags.includes(tag))
+        const tagsToRemove = this.resource.tags.filter(
+          (tag) => !this.editAssignedTags.includes(tag)
+        )
+
+        if (tagsToAdd.length) {
+          await this.$client.tags.addResourceTag(this.resource.fileId, tagsToAdd)
+        }
+
+        if (tagsToRemove.length) {
+          await this.$client.tags.removeResourceTag(this.resource.fileId, tagsToRemove)
+        }
+
+        this.UPDATE_RESOURCE_FIELD({
+          id: this.resource.id,
+          field: 'tags',
+          value: [...this.editAssignedTags]
+        })
+        this.displayedItem.value.tags = [...this.editAssignedTags]
+
+        bus.publish('sidebar.entity.saved')
+      } catch (e) {
+        console.error(e)
+      }
+    },
+    createOption(option) {
+      return option.toLowerCase()
+    },
+    showSelectNewLabel(option) {
+      return !this.$refs.tagSelect.$refs.select.optionExists(option)
+    }
+  }
+})
+</script>
+
+<style lang="scss"></style>

packages/web-app-files/src/fileSideBars.ts

@@ -3,6 +3,7 @@ import FileDetailsMultiple from './components/SideBar/Details/FileDetailsMultipl
 import FileActions from './components/SideBar/Actions/FileActions.vue'
 import FileVersions from './components/SideBar/Versions/FileVersions.vue'
 import SharesPanel from './components/SideBar/Shares/SharesPanel.vue'
+import TagsPanel from './components/SideBar/TagsPanel.vue'
 import NoSelection from './components/SideBar/NoSelection.vue'
 import SpaceActions from './components/SideBar/Actions/SpaceActions.vue'
 import SpaceDetails from './components/SideBar/Details/SpaceDetails.vue'
@@ -140,6 +141,24 @@ const panelGenerators: (({
       return false
     }
   }),
+  ({ capabilities, highlightedFile, router, multipleSelection, rootFolder }) => ({
+    app: 'tags-item',
+    icon: 'price-tag-3',
+    iconFillType: 'line',
+    title: $gettext('Tags'),
+    component: TagsPanel,
+    componentAttrs: {},
+    get enabled() {
+      if (!capabilities?.files?.tags || multipleSelection || rootFolder) return false
+      if (typeof highlightedFile.canEditTags !== 'function' || !highlightedFile.canEditTags())
+        return false
+      return !(
+        isLocationTrashActive(router, 'files-trash-personal') ||
+        isLocationTrashActive(router, 'files-trash-spaces-project') ||
+        isLocationPublicActive(router, 'files-public-files')
+      )
+    }
+  }),
   ({ highlightedFile, capabilities }) => ({
     app: 'space-share-item',
     icon: 'group',

packages/web-app-files/src/helpers/resource/filter.ts

@@ -5,7 +5,7 @@ export const filterResources = (resources: unknown[], term: string, limit?: numb
     includeScore: true,
     useExtendedSearch: true,
     threshold: 0.3,
-    keys: ['name', 'type', 'icon', 'extension']
+    keys: ['name', 'type', 'icon', 'extension', 'tags']
   })
 
   return (engine.search(term, { limit }) as any[]).map((result: any) => result.item)