move tags to details panel (#9905)

* MVP

* removed unused composable

* refactored to single component

* renamed component, adjusted tests

* fix import

* Close sidebar on tag search

* React on code review

* Fix is router link in public page context

* Fix unit tests

* Fix unit tests

* Fix link color

* Fix e2e via timeout

* Remove useless styling

* Add changelog item

* Fix e2e correctly

---------

Co-authored-by: Jan Ackermann <jan.alexander.ackermann@outlook.com>

changelog/unreleased/enhancement-manage-tags-in-details-panel

@@ -0,0 +1,8 @@
+Enhancement: Manage tags in details panel
+
+We've enhanced the details panel, now tags are viewable and manageable there.
+That change makes it easier for the user to manage tags, as they don't need to click an additional
+context menu action.
+
+https://github.com/owncloud/web/pull/9905
+https://github.com/owncloud/web/issues/9783

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

@@ -98,18 +98,17 @@
  :slot-props="{ space, resource }"
  :multiple="true"
  />
- <tr v-if="showTags" data-testid="tags">
- <th scope="col" class="oc-pr-s oc-font-semibold" v-text="$gettext('Tags')" />
+ <tr v-if="hasTags" data-testid="tags">
+ <th scope="col" class="oc-pr-s oc-font-semibold">
+ {{ $gettext('Tags') }}
+ <oc-contextual-helper
+ v-if="contextualHelper?.isEnabled"
+ v-bind="contextualHelper?.data"
+ class="oc-pl-xs"
+ ></oc-contextual-helper>
+ </th>
  <td>
- <span v-for="(tag, index) in resource.tags" :key="tag">
- <component
- :is="!isPublicLinkContext ? 'router-link' : 'span'"
- v-bind="getTagComponentAttrs(tag)"
- >
- <span v-if="index + 1 < resource.tags.length">{{ tag }}</span>
- <span v-else v-text="tag" /></component
- ><span v-if="index + 1 < resource.tags.length" class="oc-mr-xs">,</span>
- </span>
+ <tags-select :resource="resource"></tags-select>
  </td>
  </tr>
  </table>
@@ -120,9 +119,8 @@
 <script lang="ts">
 import { computed, defineComponent, inject, Ref, ref, unref, watch } from 'vue'
 import { mapGetters } from 'vuex'
-import { ImageDimension } from '@ownclouders/web-pkg'
+import { ImageDimension, useConfigurationManager } from '@ownclouders/web-pkg'
 import upperFirst from 'lodash-es/upperFirst'
-import { createLocationCommon } from '@ownclouders/web-pkg'
 import { ShareTypes } from '@ownclouders/web-client/src/helpers/share'
 import {
  useCapabilityFilesTags,
@@ -145,25 +143,26 @@ import { useTask } from 'vue-concurrency'
 import { useGettext } from 'vue3-gettext'
 import { getSharedAncestorRoute } from '@ownclouders/web-pkg'
 import { AncestorMetaData } from '@ownclouders/web-pkg'
+import { tagsHelper } from '../../../helpers/contextualHelpers'
+import { ContextualHelper } from '@ownclouders/design-system/src/helpers'
+import TagsSelect from './TagsSelect.vue'
 
 export default defineComponent({
  name: 'FileDetails',
+ components: { TagsSelect },
  setup() {
+ const configurationManager = useConfigurationManager()
  const store = useStore()
+ const clientService = useClientService()
  const { getMatchingSpace } = useGetMatchingSpace()
  const language = useGettext()
 
  const resource = inject<Resource>('resource')
  const space = inject<Ref<SpaceResource>>('space')
  const isPublicLinkContext = usePublicLinkContext({ store })
- const clientService = useClientService()
  const previewService = usePreviewService()
  const preview = ref(undefined)
 
- const matchingSpace = computed(() => {
- return getMatchingSpace(unref(resource))
- })
-
  const loadData = async () => {
  const calls = []
  if (unref(resource).type === 'file' && !unref(isPublicLinkContext)) {
@@ -208,6 +207,12 @@ export default defineComponent({
  ShareTypes.containsAnyValue(ShareTypes.authenticated, a.shareTypes)
  )
  })
+ const sharedAncestorRoute = computed(() => {
+ return getSharedAncestorRoute({
+ sharedAncestor: unref(sharedAncestor),
+ matchingSpace: unref(space) || getMatchingSpace(unref(resource))
+ })
+ })
  const formatDateRelative = (date) => {
  return formatRelativeDateFromJSDate(new Date(date), language.current)
  }
@@ -223,6 +228,11 @@ export default defineComponent({
  { immediate: true }
  )
 
+ const contextualHelper = {
+ isEnabled: configurationManager.options.contextHelpers,
+ data: tagsHelper({ configurationManager: configurationManager })
+ } as ContextualHelper
+
  return {
  preview,
  isPublicLinkContext,
@@ -232,8 +242,9 @@ export default defineComponent({
  isPreviewLoading,
  ancestorMetaData,
  sharedAncestor,
+ sharedAncestorRoute,
  formatDateRelative,
- matchingSpace
+ contextualHelper
  }
  },
  computed: {
@@ -262,12 +273,6 @@ export default defineComponent({
  showSharedVia() {
  return this.showShares && this.sharedAncestor
  },
- sharedAncestorRoute() {
- return getSharedAncestorRoute({
- sharedAncestor: this.sharedAncestor,
- matchingSpace: this.space || this.matchingSpace
- })
- },
  showShares() {
  if (this.isPublicLinkContext) {
  return false
@@ -312,9 +317,6 @@ export default defineComponent({
  const displayDate = formatDateFromHTTP(this.resource.mdate, this.$language.current)
  return upperFirst(displayDate)
  },
- showTags() {
- return this.hasTags && this.resource.tags?.length
- },
  hasAnyShares() {
  return (
  this.resource.shareTypes?.length > 0 ||
@@ -339,21 +341,6 @@ export default defineComponent({
  methods: {
  expandVersionsPanel() {
  eventBus.publish(SideBarEventTopics.setActivePanel, 'versions')
- },
- getTagLink(tag) {
- const currentTerm = unref(this.$router.currentRoute).query?.term
- return createLocationCommon('files-common-search', {
- query: { provider: 'files.sdk', q_tags: tag, ...(currentTerm && { term: currentTerm }) }
- })
- },
- getTagComponentAttrs(tag) {
- if (this.isPublicLinkContext) {
- return {}
- }
-
- return {
- to: this.getTagLink(tag)
- }
  }
  }
 })