From 13f36beec3f6b210a9bdc0f09042a13d081160d9 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Wed, 24 Jul 2019 10:24:30 +0200
Subject: [PATCH 1/8] See #432: added admin API endpoints to retrieve and
 delete tags

---
 api/funkwhale_api/manage/filters.py     |  9 ++++++
 api/funkwhale_api/manage/serializers.py | 28 ++++++++++++++++
 api/funkwhale_api/manage/urls.py        |  1 +
 api/funkwhale_api/manage/views.py       | 43 ++++++++++++++++++++++++-
 api/tests/manage/test_serializers.py    | 19 +++++++++++
 api/tests/manage/test_views.py          | 28 ++++++++++++++++
 6 files changed, 127 insertions(+), 1 deletion(-)

diff --git a/api/funkwhale_api/manage/filters.py b/api/funkwhale_api/manage/filters.py
index de12ab1ab..c8b8e60a5 100644
--- a/api/funkwhale_api/manage/filters.py
+++ b/api/funkwhale_api/manage/filters.py
@@ -13,6 +13,7 @@ from funkwhale_api.federation import utils as federation_utils
 from funkwhale_api.moderation import models as moderation_models
 from funkwhale_api.music import models as music_models
 from funkwhale_api.users import models as users_models
+from funkwhale_api.tags import models as tags_models
 
 
 class ActorField(forms.CharField):
@@ -340,3 +341,11 @@ class ManageInstancePolicyFilterSet(filters.FilterSet):
             "silence_notifications",
             "reject_media",
         ]
+
+
+class ManageTagFilterSet(filters.FilterSet):
+    q = fields.SearchFilter(search_fields=["name"])
+
+    class Meta:
+        model = tags_models.Tag
+        fields = ["q"]
diff --git a/api/funkwhale_api/manage/serializers.py b/api/funkwhale_api/manage/serializers.py
index 67e0178e0..eab3b87f0 100644
--- a/api/funkwhale_api/manage/serializers.py
+++ b/api/funkwhale_api/manage/serializers.py
@@ -10,6 +10,7 @@ from funkwhale_api.federation import tasks as federation_tasks
 from funkwhale_api.moderation import models as moderation_models
 from funkwhale_api.music import models as music_models
 from funkwhale_api.music import serializers as music_serializers
+from funkwhale_api.tags import models as tags_models
 from funkwhale_api.users import models as users_models
 
 from . import filters
@@ -564,3 +565,30 @@ class ManageUploadSerializer(serializers.ModelSerializer):
             "track",
             "library",
         )
+
+
+class ManageTagSerializer(ManageBaseAlbumSerializer):
+
+    tracks_count = serializers.SerializerMethodField()
+    albums_count = serializers.SerializerMethodField()
+    artists_count = serializers.SerializerMethodField()
+
+    class Meta:
+        model = tags_models.Tag
+        fields = [
+            "id",
+            "name",
+            "creation_date",
+            "tracks_count",
+            "albums_count",
+            "artists_count",
+        ]
+
+    def get_tracks_count(self, obj):
+        return getattr(obj, "_tracks_count", None)
+
+    def get_albums_count(self, obj):
+        return getattr(obj, "_albums_count", None)
+
+    def get_artists_count(self, obj):
+        return getattr(obj, "_artists_count", None)
diff --git a/api/funkwhale_api/manage/urls.py b/api/funkwhale_api/manage/urls.py
index 2af18f5b7..b830f0023 100644
--- a/api/funkwhale_api/manage/urls.py
+++ b/api/funkwhale_api/manage/urls.py
@@ -24,6 +24,7 @@ users_router.register(r"invitations", views.ManageInvitationViewSet, "invitation
 
 other_router = routers.OptionalSlashRouter()
 other_router.register(r"accounts", views.ManageActorViewSet, "accounts")
+other_router.register(r"tags", views.ManageTagViewSet, "tags")
 
 urlpatterns = [
     url(
diff --git a/api/funkwhale_api/manage/views.py b/api/funkwhale_api/manage/views.py
index c788dd96b..09737a7a8 100644
--- a/api/funkwhale_api/manage/views.py
+++ b/api/funkwhale_api/manage/views.py
@@ -2,7 +2,7 @@ from rest_framework import mixins, response, viewsets
 from rest_framework import decorators as rest_decorators
 
 from django.db.models import Count, Prefetch, Q, Sum, OuterRef, Subquery
-from django.db.models.functions import Coalesce
+from django.db.models.functions import Coalesce, Length
 from django.shortcuts import get_object_or_404
 
 from funkwhale_api.common import models as common_models
@@ -14,6 +14,7 @@ from funkwhale_api.history import models as history_models
 from funkwhale_api.music import models as music_models
 from funkwhale_api.moderation import models as moderation_models
 from funkwhale_api.playlists import models as playlists_models
+from funkwhale_api.tags import models as tags_models
 from funkwhale_api.users import models as users_models
 
 
@@ -452,3 +453,43 @@ class ManageInstancePolicyViewSet(
 
     def perform_create(self, serializer):
         serializer.save(actor=self.request.user.actor)
+
+
+class ManageTagViewSet(
+    mixins.ListModelMixin,
+    mixins.RetrieveModelMixin,
+    mixins.DestroyModelMixin,
+    mixins.CreateModelMixin,
+    viewsets.GenericViewSet,
+):
+    lookup_field = "name"
+    queryset = (
+        tags_models.Tag.objects.all()
+        .order_by("-creation_date")
+        .annotate(items_count=Count("tagged_items"))
+        .annotate(length=Length("name"))
+    )
+    serializer_class = serializers.ManageTagSerializer
+    filterset_class = filters.ManageTagFilterSet
+    required_scope = "instance:libraries"
+    ordering_fields = ["id", "creation_date", "name", "items_count", "length"]
+
+    def get_queryset(self):
+        queryset = super().get_queryset()
+        from django.contrib.contenttypes.models import ContentType
+
+        album_ct = ContentType.objects.get_for_model(music_models.Album)
+        track_ct = ContentType.objects.get_for_model(music_models.Track)
+        artist_ct = ContentType.objects.get_for_model(music_models.Artist)
+        queryset = queryset.annotate(
+            _albums_count=Count(
+                "tagged_items", filter=Q(tagged_items__content_type=album_ct)
+            ),
+            _tracks_count=Count(
+                "tagged_items", filter=Q(tagged_items__content_type=track_ct)
+            ),
+            _artists_count=Count(
+                "tagged_items", filter=Q(tagged_items__content_type=artist_ct)
+            ),
+        )
+        return queryset
diff --git a/api/tests/manage/test_serializers.py b/api/tests/manage/test_serializers.py
index e621bf14c..c1c532fac 100644
--- a/api/tests/manage/test_serializers.py
+++ b/api/tests/manage/test_serializers.py
@@ -496,3 +496,22 @@ def test_action_serializer_delete(factory, serializer_class, factories):
     s.handle_delete(objects[0].__class__.objects.all())
 
     assert objects[0].__class__.objects.count() == 0
+
+
+def test_manage_tag_serializer(factories):
+    tag = factories["tags.Tag"]()
+
+    setattr(tag, "_tracks_count", 42)
+    setattr(tag, "_albums_count", 54)
+    setattr(tag, "_artists_count", 66)
+    expected = {
+        "id": tag.id,
+        "name": tag.name,
+        "creation_date": tag.creation_date.isoformat().split("+")[0] + "Z",
+        "tracks_count": 42,
+        "albums_count": 54,
+        "artists_count": 66,
+    }
+    s = serializers.ManageTagSerializer(tag)
+
+    assert s.data == expected
diff --git a/api/tests/manage/test_views.py b/api/tests/manage/test_views.py
index 72394052c..710722b90 100644
--- a/api/tests/manage/test_views.py
+++ b/api/tests/manage/test_views.py
@@ -377,3 +377,31 @@ def test_upload_delete(factories, superuser_api_client):
     response = superuser_api_client.delete(url)
 
     assert response.status_code == 204
+
+
+def test_tag_detail(factories, superuser_api_client):
+    tag = factories["tags.Tag"]()
+    url = reverse("api:v1:manage:tags-detail", kwargs={"name": tag.name})
+    response = superuser_api_client.get(url)
+
+    assert response.status_code == 200
+    assert response.data["name"] == tag.name
+
+
+def test_tag_list(factories, superuser_api_client, settings):
+    tag = factories["tags.Tag"]()
+    url = reverse("api:v1:manage:tags-list")
+    response = superuser_api_client.get(url)
+
+    assert response.status_code == 200
+
+    assert response.data["count"] == 1
+    assert response.data["results"][0]["name"] == tag.name
+
+
+def test_tag_delete(factories, superuser_api_client):
+    tag = factories["tags.Tag"]()
+    url = reverse("api:v1:manage:tags-detail", kwargs={"name": tag.name})
+    response = superuser_api_client.delete(url)
+
+    assert response.status_code == 204

From aaced60ec1ee0436992647c951d71e4293ed9efa Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 25 Jul 2019 10:17:31 +0200
Subject: [PATCH 2/8] See #432: added /action endpoint to manage tags in batch

---
 api/funkwhale_api/manage/serializers.py | 10 ++++++++++
 api/funkwhale_api/manage/views.py       | 10 ++++++++++
 api/tests/manage/test_serializers.py    |  1 +
 3 files changed, 21 insertions(+)

diff --git a/api/funkwhale_api/manage/serializers.py b/api/funkwhale_api/manage/serializers.py
index eab3b87f0..6eecdd900 100644
--- a/api/funkwhale_api/manage/serializers.py
+++ b/api/funkwhale_api/manage/serializers.py
@@ -592,3 +592,13 @@ class ManageTagSerializer(ManageBaseAlbumSerializer):
 
     def get_artists_count(self, obj):
         return getattr(obj, "_artists_count", None)
+
+
+class ManageTagActionSerializer(common_serializers.ActionSerializer):
+    actions = [common_serializers.Action("delete", allow_all=False)]
+    filterset_class = filters.ManageTagFilterSet
+    pk_field = "name"
+
+    @transaction.atomic
+    def handle_delete(self, objects):
+        return objects.delete()
diff --git a/api/funkwhale_api/manage/views.py b/api/funkwhale_api/manage/views.py
index 09737a7a8..9ecd1fee2 100644
--- a/api/funkwhale_api/manage/views.py
+++ b/api/funkwhale_api/manage/views.py
@@ -493,3 +493,13 @@ class ManageTagViewSet(
             ),
         )
         return queryset
+
+    @rest_decorators.action(methods=["post"], detail=False)
+    def action(self, request, *args, **kwargs):
+        queryset = self.get_queryset()
+        serializer = serializers.ManageTagActionSerializer(
+            request.data, queryset=queryset
+        )
+        serializer.is_valid(raise_exception=True)
+        result = serializer.save()
+        return response.Response(result, status=200)
diff --git a/api/tests/manage/test_serializers.py b/api/tests/manage/test_serializers.py
index c1c532fac..af2a214a6 100644
--- a/api/tests/manage/test_serializers.py
+++ b/api/tests/manage/test_serializers.py
@@ -487,6 +487,7 @@ def test_manage_upload_serializer(factories, now):
         ("music.Artist", serializers.ManageArtistActionSerializer),
         ("music.Library", serializers.ManageLibraryActionSerializer),
         ("music.Upload", serializers.ManageUploadActionSerializer),
+        ("tags.Tag", serializers.ManageTagActionSerializer),
     ],
 )
 def test_action_serializer_delete(factory, serializer_class, factories):

From 1674c771ca6baff17bb7b8e7ee2028580934c320 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 25 Jul 2019 10:40:34 +0200
Subject: [PATCH 3/8] See #432: added tag admin UI (list, detail)

---
 front/src/components/library/TagDetail.vue    |   5 +
 .../components/manage/library/TagsTable.vue   | 209 +++++++
 front/src/components/mixins/Translations.vue  |   2 +
 front/src/router/index.js                     | 569 +++++++++++-------
 front/src/views/admin/library/Base.vue        |   3 +
 front/src/views/admin/library/TagDetail.vue   | 215 +++++++
 front/src/views/admin/library/TagsList.vue    |  29 +
 7 files changed, 802 insertions(+), 230 deletions(-)
 create mode 100644 front/src/components/manage/library/TagsTable.vue
 create mode 100644 front/src/views/admin/library/TagDetail.vue
 create mode 100644 front/src/views/admin/library/TagsList.vue

diff --git a/front/src/components/library/TagDetail.vue b/front/src/components/library/TagDetail.vue
index 904bce7ae..e928caa29 100644
--- a/front/src/components/library/TagDetail.vue
+++ b/front/src/components/library/TagDetail.vue
@@ -7,6 +7,11 @@
         </span>
       </h2>
       <radio-button type="tag" :object-id="id"></radio-button>
+      <router-link class="ui right floated button" v-if="$store.state.auth.availablePermissions['library']" :to="{name: 'manage.library.tags.detail', params: {id: id}}">
+        <i class="wrench icon"></i>
+        <translate translate-context="Content/Moderation/Link">Open in moderation interface</translate>
+      </router-link>
+
       <div class="ui hidden divider"></div>
       <div class="ui row">
         <artist-widget :controls="false" :filters="{playable: true, ordering: '-creation_date', tag: id}">
diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
new file mode 100644
index 000000000..b26e86859
--- /dev/null
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div class="ui inline form">
+      <div class="fields">
+        <div class="ui six wide field">
+          <label><translate translate-context="Content/Search/Input.Label/Noun">Search</translate></label>
+          <form @submit.prevent="search.query = $refs.search.value">
+            <input name="search" ref="search" type="text" :value="search.query" :placeholder="labels.searchPlaceholder" />
+          </form>
+        </div>
+        <div class="field">
+          <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering</translate></label>
+          <select class="ui dropdown" v-model="ordering">
+            <option v-for="option in orderingOptions" :value="option[0]">
+              {{ sharedLabels.filters[option[1]] }}
+            </option>
+          </select>
+        </div>
+        <div class="field">
+          <label><translate translate-context="Content/Search/Dropdown.Label/Noun">Ordering direction</translate></label>
+          <select class="ui dropdown" v-model="orderingDirection">
+            <option value="+"><translate translate-context="Content/Search/Dropdown">Ascending</translate></option>
+            <option value="-"><translate translate-context="Content/Search/Dropdown">Descending</translate></option>
+          </select>
+        </div>
+      </div>
+    </div>
+    <import-status-modal :upload="detailedUpload" :show.sync="showUploadDetailModal" />
+    <div class="dimmable">
+      <div v-if="isLoading" class="ui active inverted dimmer">
+          <div class="ui loader"></div>
+      </div>
+      <action-table
+        v-if="result"
+        @action-launched="fetchData"
+        :objects-data="result"
+        :actions="actions"
+        action-url="manage/tags/action/"
+        idField="name"
+        :filters="actionFilters">
+        <template slot="header-cells">
+          <th><translate translate-context="*/*/*">Name</translate></th>
+          <th><translate translate-context="*/*/*">Artists</translate></th>
+          <th><translate translate-context="*/*/*">Albums</translate></th>
+          <th><translate translate-context="*/*/*">Tracks</translate></th>
+          <th><translate translate-context="Content/*/*/Noun">Creation date</translate></th>
+        </template>
+        <template slot="row-cells" slot-scope="scope">
+          <td>
+            <router-link :to="{name: 'manage.library.tags.detail', params: {id: scope.obj.name }}" :title="scope.obj.name">
+              {{ scope.obj.name|truncate(30, "…", true) }}
+            </router-link>
+          </td>
+          <td>
+            {{ scope.obj.artists_count }}
+          </td>
+          <td>
+            {{ scope.obj.albums_count }}
+          </td>
+          <td>
+            {{ scope.obj.tracks_count }}
+          </td>
+          <td>
+            <human-date :date="scope.obj.creation_date"></human-date>
+          </td>
+        </template>
+      </action-table>
+    </div>
+    <div>
+      <pagination
+        v-if="result && result.count > paginateBy"
+        @page-changed="selectPage"
+        :compact="true"
+        :current="page"
+        :paginate-by="paginateBy"
+        :total="result.count"
+        ></pagination>
+
+      <span v-if="result && result.results.length > 0">
+        <translate translate-context="Content/*/Paragraph"
+          :translate-params="{start: ((page-1) * paginateBy) + 1, end: ((page-1) * paginateBy) + result.results.length, total: result.count}">
+          Showing results %{ start }-%{ end } on %{ total }
+        </translate>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+import _ from '@/lodash'
+import time from '@/utils/time'
+import {normalizeQuery, parseTokens} from '@/search'
+import Pagination from '@/components/Pagination'
+import ActionTable from '@/components/common/ActionTable'
+import OrderingMixin from '@/components/mixins/Ordering'
+import TranslationsMixin from '@/components/mixins/Translations'
+import SmartSearchMixin from '@/components/mixins/SmartSearch'
+import ImportStatusModal from '@/components/library/ImportStatusModal'
+
+
+export default {
+  mixins: [OrderingMixin, TranslationsMixin, SmartSearchMixin],
+  props: {
+    filters: {type: Object, required: false},
+  },
+  components: {
+    Pagination,
+    ActionTable,
+    ImportStatusModal
+  },
+  data () {
+    let defaultOrdering = this.getOrderingFromString(this.defaultOrdering || '-creation_date')
+    return {
+      detailedUpload: null,
+      showUploadDetailModal: false,
+      time,
+      isLoading: false,
+      result: null,
+      page: 1,
+      paginateBy: 50,
+      search: {
+        query: this.defaultQuery,
+        tokens: parseTokens(normalizeQuery(this.defaultQuery))
+      },
+      orderingDirection: defaultOrdering.direction || '+',
+      ordering: defaultOrdering.field,
+      orderingOptions: [
+        ['creation_date', 'creation_date'],
+        ['name', 'name'],
+        ['length', 'length'],
+        ['items_count', 'items_count'],
+      ]
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  methods: {
+    fetchData () {
+      let params = _.merge({
+        'page': this.page,
+        'page_size': this.paginateBy,
+        'q': this.search.query,
+        'ordering': this.getOrderingAsString()
+      }, this.filters)
+      let self = this
+      self.isLoading = true
+      self.checked = []
+      axios.get('/manage/tags/', {params: params}).then((response) => {
+        self.result = response.data
+        self.isLoading = false
+      }, error => {
+        self.isLoading = false
+        self.errors = error.backendErrors
+      })
+    },
+    selectPage: function (page) {
+      this.page = page
+    },
+  },
+  computed: {
+    labels () {
+      return {
+        searchPlaceholder: this.$pgettext('Content/Search/Input.Placeholder', 'Search by name')
+      }
+    },
+    actionFilters () {
+      var currentFilters = {
+        q: this.search.query
+      }
+      if (this.filters) {
+        return _.merge(currentFilters, this.filters)
+      } else {
+        return currentFilters
+      }
+    },
+    actions () {
+      let deleteLabel = this.$pgettext('*/*/*/Verb', 'Delete')
+      let confirmationMessage = this.$pgettext('Popup/*/Paragraph', 'The selected tag will be removed and unlinked with existing content, if any. This action is irreversible.')
+      return [
+        {
+          name: 'delete',
+          label: deleteLabel,
+          confirmationMessage: confirmationMessage,
+          isDangerous: true,
+          allowAll: false,
+          confirmColor: 'red',
+        },
+      ]
+    }
+  },
+  watch: {
+    search (newValue) {
+      this.page = 1
+      this.fetchData()
+    },
+    page () {
+      this.fetchData()
+    },
+    ordering () {
+      this.fetchData()
+    },
+    orderingDirection () {
+      this.fetchData()
+    }
+  }
+}
+</script>
diff --git a/front/src/components/mixins/Translations.vue b/front/src/components/mixins/Translations.vue
index 56ea3ed15..e6e809252 100644
--- a/front/src/components/mixins/Translations.vue
+++ b/front/src/components/mixins/Translations.vue
@@ -52,6 +52,8 @@ export default {
           album_title: this.$pgettext('Content/*/Dropdown/Noun', 'Album name'),
           artist_name: this.$pgettext('Content/*/Dropdown/Noun', 'Artist name'),
           name: this.$pgettext('*/*/*/Noun', 'Name'),
+          length: this.$pgettext('*/*/*/Noun', 'Length'),
+          items_count: this.$pgettext('*/*/*/Noun', 'Items'),
           size: this.$pgettext('Content/Library/*/in MB', 'Size'),
           bitrate: this.$pgettext('Content/Track/*/Noun', 'Bitrate'),
           duration: this.$pgettext('Content/*/*', 'Duration'),
diff --git a/front/src/router/index.js b/front/src/router/index.js
index 1d4996746..af21b168b 100644
--- a/front/src/router/index.js
+++ b/front/src/router/index.js
@@ -1,430 +1,508 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue"
+import Router from "vue-router"
 
 Vue.use(Router)
 
-console.log('PROCESS', process.env)
+console.log("PROCESS", process.env)
 export default new Router({
-  mode: 'history',
-  linkActiveClass: 'active',
-  base: process.env.VUE_APP_ROUTER_BASE_URL || '/',
+  mode: "history",
+  linkActiveClass: "active",
+  base: process.env.VUE_APP_ROUTER_BASE_URL || "/",
   routes: [
     {
-      path: '/',
-      name: 'index',
+      path: "/",
+      name: "index",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/Home"),
+        import(/* webpackChunkName: "core" */ "@/components/Home")
     },
     {
-      path: '/front',
-      name: 'front',
-      redirect: '/'
+      path: "/front",
+      name: "front",
+      redirect: "/"
     },
     {
-      path: '/about',
-      name: 'about',
+      path: "/about",
+      name: "about",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/About"),
+        import(/* webpackChunkName: "core" */ "@/components/About")
     },
     {
-      path: '/login',
-      name: 'login',
+      path: "/login",
+      name: "login",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/auth/Login"),
-      props: (route) => ({ next: route.query.next || '/library' })
+      props: route => ({ next: route.query.next || "/library" })
     },
     {
-      path: '/notifications',
-      name: 'notifications',
+      path: "/notifications",
+      name: "notifications",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/views/Notifications"),
+        import(/* webpackChunkName: "core" */ "@/views/Notifications")
     },
     {
-      path: '/auth/password/reset',
-      name: 'auth.password-reset',
+      path: "/auth/password/reset",
+      name: "auth.password-reset",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/auth/PasswordReset"),
-      props: (route) => ({
+      props: route => ({
         defaultEmail: route.query.email
       })
     },
     {
-      path: '/auth/email/confirm',
-      name: 'auth.email-confirm',
+      path: "/auth/email/confirm",
+      name: "auth.email-confirm",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/auth/EmailConfirm"),
-      props: (route) => ({
+      props: route => ({
         defaultKey: route.query.key
       })
     },
     {
-      path: '/auth/password/reset/confirm',
-      name: 'auth.password-reset-confirm',
+      path: "/auth/password/reset/confirm",
+      name: "auth.password-reset-confirm",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/views/auth/PasswordResetConfirm"),
-      props: (route) => ({
+        import(
+          /* webpackChunkName: "core" */ "@/views/auth/PasswordResetConfirm"
+        ),
+      props: route => ({
         defaultUid: route.query.uid,
         defaultToken: route.query.token
       })
     },
     {
-      path: '/authorize',
-      name: 'authorize',
+      path: "/authorize",
+      name: "authorize",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/auth/Authorize"),
-      props: (route) => ({
+      props: route => ({
         clientId: route.query.client_id,
         redirectUri: route.query.redirect_uri,
         scope: route.query.scope,
         responseType: route.query.response_type,
         nonce: route.query.nonce,
-        state: route.query.state,
+        state: route.query.state
       })
     },
     {
-      path: '/signup',
-      name: 'signup',
+      path: "/signup",
+      name: "signup",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/auth/Signup"),
-      props: (route) => ({
+      props: route => ({
         defaultInvitation: route.query.invitation
       })
     },
     {
-      path: '/logout',
-      name: 'logout',
+      path: "/logout",
+      name: "logout",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/Logout"),
-
+        import(/* webpackChunkName: "core" */ "@/components/auth/Logout")
     },
     {
-      path: '/settings',
-      name: 'settings',
+      path: "/settings",
+      name: "settings",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/Settings"),
+        import(/* webpackChunkName: "core" */ "@/components/auth/Settings")
     },
     {
-      path: '/settings/applications/new',
-      name: 'settings.applications.new',
-      props: (route) => ({
+      path: "/settings/applications/new",
+      name: "settings.applications.new",
+      props: route => ({
         scopes: route.query.scopes,
         name: route.query.name,
-        redirect_uris: route.query.redirect_uris,
+        redirect_uris: route.query.redirect_uris
       }),
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/ApplicationNew"),
+        import(
+          /* webpackChunkName: "core" */ "@/components/auth/ApplicationNew"
+        )
     },
     {
-      path: '/settings/applications/:id/edit',
-      name: 'settings.applications.edit',
+      path: "/settings/applications/:id/edit",
+      name: "settings.applications.edit",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/auth/ApplicationEdit"),
+        import(
+          /* webpackChunkName: "core" */ "@/components/auth/ApplicationEdit"
+        ),
       props: true
     },
     {
-      path: '/@:username',
-      name: 'profile',
+      path: "/@:username",
+      name: "profile",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/auth/Profile"),
       props: true
     },
     {
-      path: '/favorites',
+      path: "/favorites",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/favorites/List"),
-      props: (route) => ({
+      props: route => ({
         defaultOrdering: route.query.ordering,
         defaultPage: route.query.page,
         defaultPaginateBy: route.query.paginateBy
       })
     },
     {
-      path: '/content',
+      path: "/content",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/content/Base"),
       children: [
         {
-          path: '',
-          name: 'content.index',
+          path: "",
+          name: "content.index",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/Home"),
+            import(/* webpackChunkName: "core" */ "@/views/content/Home")
         }
       ]
     },
     {
-      path: '/content/libraries/tracks',
+      path: "/content/libraries/tracks",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/content/Base"),
       children: [
         {
-          path: '',
-          name: 'content.libraries.files',
+          path: "",
+          name: "content.libraries.files",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/libraries/Files"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/views/content/libraries/Files"
+            ),
+          props: route => ({
             query: route.query.q
           })
         }
       ]
     },
     {
-      path: '/content/libraries',
+      path: "/content/libraries",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/content/Base"),
       children: [
         {
-          path: '',
-          name: 'content.libraries.index',
+          path: "",
+          name: "content.libraries.index",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/libraries/Home"),
+            import(
+              /* webpackChunkName: "core" */ "@/views/content/libraries/Home"
+            )
         },
         {
-          path: ':id/upload',
-          name: 'content.libraries.detail.upload',
+          path: ":id/upload",
+          name: "content.libraries.detail.upload",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/libraries/Upload"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/views/content/libraries/Upload"
+            ),
+          props: route => ({
             id: route.params.id,
             defaultImportReference: route.query.import
           })
         },
         {
-          path: ':id',
-          name: 'content.libraries.detail',
+          path: ":id",
+          name: "content.libraries.detail",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/libraries/Detail"),
+            import(
+              /* webpackChunkName: "core" */ "@/views/content/libraries/Detail"
+            ),
           props: true
         }
       ]
     },
     {
-      path: '/content/remote',
+      path: "/content/remote",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/views/content/Base"),
       children: [
         {
-          path: '',
-          name: 'content.remote.index',
+          path: "",
+          name: "content.remote.index",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/views/content/remote/Home"),
+            import(/* webpackChunkName: "core" */ "@/views/content/remote/Home")
         }
       ]
     },
     {
-      path: '/manage/settings',
-      name: 'manage.settings',
+      path: "/manage/settings",
+      name: "manage.settings",
       component: () =>
-        import(/* webpackChunkName: "admin" */ "@/views/admin/Settings"),
+        import(/* webpackChunkName: "admin" */ "@/views/admin/Settings")
     },
     {
-      path: '/manage/library',
+      path: "/manage/library",
       component: () =>
         import(/* webpackChunkName: "admin" */ "@/views/admin/library/Base"),
       children: [
         {
-          path: 'edits',
-          name: 'manage.library.edits',
+          path: "edits",
+          name: "manage.library.edits",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/EditsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/EditsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'artists',
-          name: 'manage.library.artists',
+          path: "artists",
+          name: "manage.library.artists",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/ArtistsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/ArtistsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'artists/:id',
-          name: 'manage.library.artists.detail',
+          path: "artists/:id",
+          name: "manage.library.artists.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/ArtistDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/ArtistDetail"
+            ),
           props: true
         },
         {
-          path: 'albums',
-          name: 'manage.library.albums',
+          path: "albums",
+          name: "manage.library.albums",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/AlbumsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/AlbumsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'albums/:id',
-          name: 'manage.library.albums.detail',
+          path: "albums/:id",
+          name: "manage.library.albums.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/AlbumDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/AlbumDetail"
+            ),
           props: true
         },
         {
-          path: 'tracks',
-          name: 'manage.library.tracks',
+          path: "tracks",
+          name: "manage.library.tracks",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/TracksList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/TracksList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'tracks/:id',
-          name: 'manage.library.tracks.detail',
+          path: "tracks/:id",
+          name: "manage.library.tracks.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/TrackDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/TrackDetail"
+            ),
           props: true
         },
         {
-          path: 'libraries',
-          name: 'manage.library.libraries',
+          path: "libraries",
+          name: "manage.library.libraries",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/LibrariesList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/LibrariesList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'libraries/:id',
-          name: 'manage.library.libraries.detail',
+          path: "libraries/:id",
+          name: "manage.library.libraries.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/LibraryDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/LibraryDetail"
+            ),
           props: true
         },
         {
-          path: 'uploads',
-          name: 'manage.library.uploads',
+          path: "uploads",
+          name: "manage.library.uploads",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/UploadsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/UploadsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'uploads/:id',
-          name: 'manage.library.uploads.detail',
+          path: "uploads/:id",
+          name: "manage.library.uploads.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/library/UploadDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/UploadDetail"
+            ),
           props: true
         },
+        {
+          path: "tags",
+          name: "manage.library.tags",
+          component: () =>
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/TagsList"
+            ),
+          props: route => {
+            return {
+              defaultQuery: route.query.q
+            }
+          }
+        },
+        {
+          path: "tags/:id",
+          name: "manage.library.tags.detail",
+          component: () =>
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/library/TagDetail"
+            ),
+          props: true
+        }
       ]
     },
     {
-      path: '/manage/users',
+      path: "/manage/users",
       component: () =>
         import(/* webpackChunkName: "admin" */ "@/views/admin/users/Base"),
       children: [
         {
-          path: 'users',
-          name: 'manage.users.users.list',
+          path: "users",
+          name: "manage.users.users.list",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/users/UsersList"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/users/UsersList"
+            )
         },
         {
-          path: 'invitations',
-          name: 'manage.users.invitations.list',
+          path: "invitations",
+          name: "manage.users.invitations.list",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/users/InvitationsList"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/users/InvitationsList"
+            )
         }
       ]
     },
     {
-      path: '/manage/moderation',
+      path: "/manage/moderation",
       component: () =>
         import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/Base"),
       children: [
         {
-          path: 'domains',
-          name: 'manage.moderation.domains.list',
+          path: "domains",
+          name: "manage.moderation.domains.list",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/DomainsList"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/moderation/DomainsList"
+            )
         },
         {
-          path: 'domains/:id',
-          name: 'manage.moderation.domains.detail',
+          path: "domains/:id",
+          name: "manage.moderation.domains.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/DomainsDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/moderation/DomainsDetail"
+            ),
           props: true
         },
         {
-          path: 'accounts',
-          name: 'manage.moderation.accounts.list',
+          path: "accounts",
+          name: "manage.moderation.accounts.list",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/AccountsList"),
-          props: (route) => {
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/moderation/AccountsList"
+            ),
+          props: route => {
             return {
-              defaultQuery: route.query.q,
-
+              defaultQuery: route.query.q
             }
           }
         },
         {
-          path: 'accounts/:id',
-          name: 'manage.moderation.accounts.detail',
+          path: "accounts/:id",
+          name: "manage.moderation.accounts.detail",
           component: () =>
-            import(/* webpackChunkName: "admin" */ "@/views/admin/moderation/AccountsDetail"),
+            import(
+              /* webpackChunkName: "admin" */ "@/views/admin/moderation/AccountsDetail"
+            ),
           props: true
         }
       ]
     },
     {
-      path: '/library',
+      path: "/library",
       component: () =>
         import(/* webpackChunkName: "core" */ "@/components/library/Library"),
       children: [
         {
-          path: '',
+          path: "",
           component: () =>
             import(/* webpackChunkName: "core" */ "@/components/library/Home"),
-          name: 'library.index'
+          name: "library.index"
         },
         {
-          path: 'artists/',
-          name: 'library.artists.browse',
+          path: "artists/",
+          name: "library.artists.browse",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/Artists"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/Artists"
+            ),
+          props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
-            defaultTags: Array.isArray(route.query.tag || []) ? route.query.tag : [route.query.tag],
+            defaultTags: Array.isArray(route.query.tag || [])
+              ? route.query.tag
+              : [route.query.tag],
             defaultPaginateBy: route.query.paginateBy,
             defaultPage: route.query.page
           })
         },
         {
-          path: 'albums/',
-          name: 'library.albums.browse',
+          path: "albums/",
+          name: "library.albums.browse",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/Albums"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/Albums"
+            ),
+          props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
-            defaultTags: Array.isArray(route.query.tag || []) ? route.query.tag : [route.query.tag],
+            defaultTags: Array.isArray(route.query.tag || [])
+              ? route.query.tag
+              : [route.query.tag],
             defaultPaginateBy: route.query.paginateBy,
             defaultPage: route.query.page
           })
         },
         {
-          path: 'radios/',
-          name: 'library.radios.browse',
+          path: "radios/",
+          name: "library.radios.browse",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/Radios"),
-          props: (route) => ({
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/Radios"
+            ),
+          props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
             defaultPaginateBy: route.query.paginateBy,
@@ -432,32 +510,36 @@ export default new Router({
           })
         },
         {
-          path: 'radios/build',
-          name: 'library.radios.build',
+          path: "radios/build",
+          name: "library.radios.build",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/radios/Builder"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/radios/Builder"
+            ),
           props: true
         },
         {
-          path: 'radios/build/:id',
-          name: 'library.radios.edit',
+          path: "radios/build/:id",
+          name: "library.radios.edit",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/radios/Builder"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/radios/Builder"
+            ),
           props: true
         },
         {
-          path: 'radios/:id',
-          name: 'library.radios.detail',
+          path: "radios/:id",
+          name: "library.radios.detail",
           component: () =>
             import(/* webpackChunkName: "core" */ "@/views/radios/Detail"),
           props: true
         },
         {
-          path: 'playlists/',
-          name: 'library.playlists.browse',
+          path: "playlists/",
+          name: "library.playlists.browse",
           component: () =>
             import(/* webpackChunkName: "core" */ "@/views/playlists/List"),
-          props: (route) => ({
+          props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
             defaultPaginateBy: route.query.paginateBy,
@@ -465,112 +547,139 @@ export default new Router({
           })
         },
         {
-          path: 'playlists/:id',
-          name: 'library.playlists.detail',
+          path: "playlists/:id",
+          name: "library.playlists.detail",
           component: () =>
             import(/* webpackChunkName: "core" */ "@/views/playlists/Detail"),
-          props: (route) => ({
+          props: route => ({
             id: route.params.id,
-            defaultEdit: route.query.mode === 'edit' })
+            defaultEdit: route.query.mode === "edit"
+          })
         },
         {
-          path: 'tags/:id',
-          name: 'library.tags.detail',
+          path: "tags/:id",
+          name: "library.tags.detail",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/TagDetail"),
-          props: true,
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/TagDetail"
+            ),
+          props: true
         },
         {
-          path: 'artists/:id',
+          path: "artists/:id",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/ArtistBase"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/ArtistBase"
+            ),
           props: true,
           children: [
             {
-              path: '',
-              name: 'library.artists.detail',
+              path: "",
+              name: "library.artists.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/ArtistDetail"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/ArtistDetail"
+                )
             },
             {
-              path: 'edit',
-              name: 'library.artists.edit',
+              path: "edit",
+              name: "library.artists.edit",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/ArtistEdit"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/ArtistEdit"
+                )
             },
             {
-              path: 'edit/:editId',
-              name: 'library.artists.edit.detail',
+              path: "edit/:editId",
+              name: "library.artists.edit.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/EditDetail"),
-              props: true,
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/EditDetail"
+                ),
+              props: true
             }
           ]
         },
         {
-          path: 'albums/:id',
+          path: "albums/:id",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/AlbumBase"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/AlbumBase"
+            ),
           props: true,
           children: [
             {
-              path: '',
-              name: 'library.albums.detail',
+              path: "",
+              name: "library.albums.detail",
               component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/AlbumDetail"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/AlbumDetail"
+                )
             },
             {
-              path: 'edit',
-              name: 'library.albums.edit',
+              path: "edit",
+              name: "library.albums.edit",
               component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/AlbumEdit"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/AlbumEdit"
+                )
             },
             {
-              path: 'edit/:editId',
-              name: 'library.albums.edit.detail',
+              path: "edit/:editId",
+              name: "library.albums.edit.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/EditDetail"),
-              props: true,
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/EditDetail"
+                ),
+              props: true
             }
           ]
         },
         {
-          path: 'tracks/:id',
+          path: "tracks/:id",
           component: () =>
-            import(/* webpackChunkName: "core" */ "@/components/library/TrackBase"),
+            import(
+              /* webpackChunkName: "core" */ "@/components/library/TrackBase"
+            ),
           props: true,
           children: [
             {
-              path: '',
-              name: 'library.tracks.detail',
+              path: "",
+              name: "library.tracks.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/TrackDetail"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/TrackDetail"
+                )
             },
             {
-              path: 'edit',
-              name: 'library.tracks.edit',
+              path: "edit",
+              name: "library.tracks.edit",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/TrackEdit"),
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/TrackEdit"
+                )
             },
             {
-              path: 'edit/:editId',
-              name: 'library.tracks.edit.detail',
+              path: "edit/:editId",
+              name: "library.tracks.edit.detail",
               component: () =>
-                import(/* webpackChunkName: "core" */ "@/components/library/EditDetail"),
-              props: true,
+                import(
+                  /* webpackChunkName: "core" */ "@/components/library/EditDetail"
+                ),
+              props: true
             }
           ]
-        },
+        }
       ]
     },
     {
-      path: '*/index.html',
-      redirect: '/'
+      path: "*/index.html",
+      redirect: "/"
     },
     {
-      path: '*',
+      path: "*",
       component: () =>
-        import(/* webpackChunkName: "core" */ "@/components/PageNotFound"),
+        import(/* webpackChunkName: "core" */ "@/components/PageNotFound")
     }
   ]
 })
diff --git a/front/src/views/admin/library/Base.vue b/front/src/views/admin/library/Base.vue
index 009e1ca95..9538f9cd2 100644
--- a/front/src/views/admin/library/Base.vue
+++ b/front/src/views/admin/library/Base.vue
@@ -19,6 +19,9 @@
       <router-link
         class="ui item"
         :to="{name: 'manage.library.uploads'}"><translate translate-context="*/*/*">Uploads</translate></router-link>
+      <router-link
+        class="ui item"
+        :to="{name: 'manage.library.tags'}"><translate translate-context="*/*/*">Tags</translate></router-link>
     </nav>
     <router-view :key="$route.fullPath"></router-view>
   </div>
diff --git a/front/src/views/admin/library/TagDetail.vue b/front/src/views/admin/library/TagDetail.vue
new file mode 100644
index 000000000..24c45dea4
--- /dev/null
+++ b/front/src/views/admin/library/TagDetail.vue
@@ -0,0 +1,215 @@
+<template>
+  <main>
+    <div v-if="isLoading" class="ui vertical segment">
+      <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
+    </div>
+    <template v-if="object">
+      <section :class="['ui', 'head', 'vertical', 'stripe', 'segment']" v-title="object.name">
+        <div class="ui stackable one column grid">
+          <div class="ui column">
+            <div class="segment-content">
+              <h2 class="ui header">
+                <i class="circular inverted hashtag icon"></i>
+                <div class="content">
+                  {{ object.name | truncate(100) }}
+                </div>
+              </h2>
+              <div class="header-buttons">
+
+                <div class="ui icon buttons">
+                  <router-link class="ui labeled icon button" :to="{name: 'library.tags.detail', params: {id: object.name }}">
+                    <i class="info icon"></i>
+                    <translate translate-context="Content/Moderation/Link/Verb">Open local profile</translate>&nbsp;
+                  </router-link>
+                  <div class="ui floating dropdown icon button" v-dropdown>
+                    <i class="dropdown icon"></i>
+                    <div class="menu">
+                      <a
+                        v-if="$store.state.auth.profile && $store.state.auth.profile.is_superuser"
+                        class="basic item"
+                        :href="$store.getters['instance/absoluteUrl'](`/api/admin/tags/tag/${object.id}`)"
+                        target="_blank" rel="noopener noreferrer">
+                        <i class="wrench icon"></i>
+                        <translate translate-context="Content/Moderation/Link/Verb">View in Django's admin</translate>&nbsp;
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div class="ui buttons">
+                  <dangerous-button
+                    :class="['ui', {loading: isLoading}, 'basic button']"
+                    :action="remove">
+                    <translate translate-context="*/*/*/Verb">Delete</translate>
+                    <p slot="modal-header"><translate translate-context="Popup/Library/Title">Delete this tag?</translate></p>
+                    <div slot="modal-content">
+                      <p><translate translate-context="Content/Moderation/Paragraph">The tag will be removed and unlinked from any existing entity. This action is irreversible.</translate></p>
+                    </div>
+                    <p slot="modal-confirm"><translate translate-context="*/*/*/Verb">Delete</translate></p>
+                  </dangerous-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <div class="ui vertical stripe segment">
+        <div class="ui stackable three column grid">
+          <div class="column">
+            <section>
+              <h3 class="ui header">
+                <i class="info icon"></i>
+                <div class="content">
+                  <translate translate-context="Content/Moderation/Title">Tag data</translate>
+                </div>
+              </h3>
+              <table class="ui very basic table">
+                <tbody>
+                  <tr>
+                    <td>
+                      <translate translate-context="*/*/*/Noun">Name</translate>
+                    </td>
+                    <td>
+                      {{ object.name }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </section>
+          </div>
+          <div class="column">
+            <section>
+              <h3 class="ui header">
+                <i class="feed icon"></i>
+                <div class="content">
+                  <translate translate-context="Content/Moderation/Title">Activity</translate>&nbsp;
+                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon"></i></span>
+
+                </div>
+              </h3>
+              <div v-if="isLoadingStats" class="ui placeholder">
+                <div class="full line"></div>
+                <div class="short line"></div>
+                <div class="medium line"></div>
+                <div class="long line"></div>
+              </div>
+              <table v-else class="ui very basic table">
+                <tbody>
+                  <tr>
+                    <td>
+                      <translate translate-context="Content/Moderation/Table.Label/Short (Value is a date)">First seen</translate>
+                    </td>
+                    <td>
+                      <human-date :date="object.creation_date"></human-date>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </section>
+          </div>
+          <div class="column">
+            <section>
+              <h3 class="ui header">
+                <i class="music icon"></i>
+                <div class="content">
+                  <translate translate-context="Content/Moderation/Title">Audio content</translate>&nbsp;
+                  <span :data-tooltip="labels.statsWarning"><i class="question circle icon"></i></span>
+
+                </div>
+              </h3>
+              <table class="ui very basic table">
+                <tbody>
+                  <tr>
+                    <td>
+                      <router-link :to="{name: 'manage.library.artists', query: {q: getQuery('tag', object.name) }}">
+                        <translate translate-context="*/*/*">Artists</translate>
+                      </router-link>
+                    </td>
+                    <td>
+                      {{ object.artists_count }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <router-link :to="{name: 'manage.library.albums', query: {q: getQuery('tag', object.name) }}">
+                        <translate translate-context="*/*/*">Albums</translate>
+                      </router-link>
+                    </td>
+                    <td>
+                      {{ object.albums_count }}
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <router-link :to="{name: 'manage.library.tracks', query: {q: getQuery('tag', object.name) }}">
+                        <translate translate-context="*/*/*">Tracks</translate>
+                      </router-link>
+                    </td>
+                    <td>
+                      {{ object.tracks_count }}
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+
+            </section>
+          </div>
+        </div>
+      </div>
+
+    </template>
+  </main>
+</template>
+
+<script>
+import axios from "axios"
+import logger from "@/logging"
+
+import FetchButton from "@/components/federation/FetchButton"
+
+export default {
+  props: ["id"],
+  components: {
+    FetchButton
+  },
+  data() {
+    return {
+      isLoading: true,
+      isLoadingStats: false,
+      object: null,
+      stats: null,
+    }
+  },
+  created() {
+    this.fetchData()
+  },
+  methods: {
+    fetchData() {
+      var self = this
+      this.isLoading = true
+      let url = `manage/tags/${this.id}/`
+      axios.get(url).then(response => {
+        self.object = response.data
+        self.isLoading = false
+      })
+    },
+    remove () {
+      var self = this
+      this.isLoading = true
+      let url = `manage/tags/${this.id}/`
+      axios.delete(url).then(response => {
+        self.$router.push({name: 'manage.library.tags'})
+      })
+    },
+    getQuery (field, value) {
+      return `${field}:"${value}"`
+    }
+  },
+  computed: {
+    labels() {
+      return {
+        statsWarning: this.$pgettext('Content/Moderation/Help text', 'Statistics are computed from known activity and content on your instance, and do not reflect general activity for this object'),
+      }
+    },
+  }
+}
+</script>
diff --git a/front/src/views/admin/library/TagsList.vue b/front/src/views/admin/library/TagsList.vue
new file mode 100644
index 000000000..2ac4e4e14
--- /dev/null
+++ b/front/src/views/admin/library/TagsList.vue
@@ -0,0 +1,29 @@
+<template>
+  <main v-title="labels.title">
+    <section class="ui vertical stripe segment">
+      <h2 class="ui header">{{ labels.title }}</h2>
+      <div class="ui hidden divider"></div>
+      <tags-table :update-url="true" :default-query="defaultQuery"></tags-table>
+    </section>
+  </main>
+</template>
+
+<script>
+import TagsTable from "@/components/manage/library/TagsTable"
+
+export default {
+  components: {
+    TagsTable
+  },
+  props: {
+    defaultQuery: {type: String, required: false},
+  },
+  computed: {
+    labels() {
+      return {
+        title: this.$pgettext('*/*/*', 'Tags')
+      }
+    }
+  }
+}
+</script>

From a48a32c7e9fb4ca0b00b242b3fdeb67c161127e5 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 25 Jul 2019 10:43:34 +0200
Subject: [PATCH 4/8] See #432: can now filter with tags in Track/album/artist
 admin

---
 api/funkwhale_api/manage/filters.py | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/api/funkwhale_api/manage/filters.py b/api/funkwhale_api/manage/filters.py
index c8b8e60a5..3ce55e039 100644
--- a/api/funkwhale_api/manage/filters.py
+++ b/api/funkwhale_api/manage/filters.py
@@ -62,6 +62,10 @@ class ManageArtistFilterSet(filters.FilterSet):
                     "field": forms.IntegerField(),
                     "distinct": True,
                 },
+                "tag": {
+                    "to": "tagged_items__tag__name",
+                    "distinct": True,
+                },
             },
         )
     )
@@ -91,6 +95,10 @@ class ManageAlbumFilterSet(filters.FilterSet):
                     "field": forms.IntegerField(),
                     "distinct": True,
                 },
+                "tag": {
+                    "to": "tagged_items__tag__name",
+                    "distinct": True,
+                },
             },
         )
     )
@@ -129,6 +137,10 @@ class ManageTrackFilterSet(filters.FilterSet):
                     "field": forms.IntegerField(),
                     "distinct": True,
                 },
+                "tag": {
+                    "to": "tagged_items__tag__name",
+                    "distinct": True,
+                },
             },
         )
     )

From 84f830829fa52ce6882443b1c7b0e22166f26cf8 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 25 Jul 2019 10:50:23 +0200
Subject: [PATCH 5/8] See #432: include tags in admin API representation of
 tracks, albums and artists

---
 api/funkwhale_api/manage/filters.py     | 15 +++------------
 api/funkwhale_api/manage/serializers.py | 18 ++++++++++++++++++
 api/funkwhale_api/manage/views.py       |  5 ++++-
 api/tests/manage/test_serializers.py    |  3 +++
 4 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/api/funkwhale_api/manage/filters.py b/api/funkwhale_api/manage/filters.py
index 3ce55e039..af9ded746 100644
--- a/api/funkwhale_api/manage/filters.py
+++ b/api/funkwhale_api/manage/filters.py
@@ -62,10 +62,7 @@ class ManageArtistFilterSet(filters.FilterSet):
                     "field": forms.IntegerField(),
                     "distinct": True,
                 },
-                "tag": {
-                    "to": "tagged_items__tag__name",
-                    "distinct": True,
-                },
+                "tag": {"to": "tagged_items__tag__name", "distinct": True},
             },
         )
     )
@@ -95,10 +92,7 @@ class ManageAlbumFilterSet(filters.FilterSet):
                     "field": forms.IntegerField(),
                     "distinct": True,
                 },
-                "tag": {
-                    "to": "tagged_items__tag__name",
-                    "distinct": True,
-                },
+                "tag": {"to": "tagged_items__tag__name", "distinct": True},
             },
         )
     )
@@ -137,10 +131,7 @@ class ManageTrackFilterSet(filters.FilterSet):
                     "field": forms.IntegerField(),
                     "distinct": True,
                 },
-                "tag": {
-                    "to": "tagged_items__tag__name",
-                    "distinct": True,
-                },
+                "tag": {"to": "tagged_items__tag__name", "distinct": True},
             },
         )
     )
diff --git a/api/funkwhale_api/manage/serializers.py b/api/funkwhale_api/manage/serializers.py
index 6eecdd900..3ea390b87 100644
--- a/api/funkwhale_api/manage/serializers.py
+++ b/api/funkwhale_api/manage/serializers.py
@@ -377,6 +377,7 @@ class ManageArtistSerializer(ManageBaseArtistSerializer):
     albums = ManageNestedAlbumSerializer(many=True)
     tracks = ManageNestedTrackSerializer(many=True)
     attributed_to = ManageBaseActorSerializer()
+    tags = serializers.SerializerMethodField()
 
     class Meta:
         model = music_models.Artist
@@ -384,8 +385,13 @@ class ManageArtistSerializer(ManageBaseArtistSerializer):
             "albums",
             "tracks",
             "attributed_to",
+            "tags",
         ]
 
+    def get_tags(self, obj):
+        tagged_items = getattr(obj, "_prefetched_tagged_items", [])
+        return [ti.tag.name for ti in tagged_items]
+
 
 class ManageNestedArtistSerializer(ManageBaseArtistSerializer):
     pass
@@ -395,6 +401,7 @@ class ManageAlbumSerializer(ManageBaseAlbumSerializer):
     tracks = ManageNestedTrackSerializer(many=True)
     attributed_to = ManageBaseActorSerializer()
     artist = ManageNestedArtistSerializer()
+    tags = serializers.SerializerMethodField()
 
     class Meta:
         model = music_models.Album
@@ -402,8 +409,13 @@ class ManageAlbumSerializer(ManageBaseAlbumSerializer):
             "artist",
             "tracks",
             "attributed_to",
+            "tags",
         ]
 
+    def get_tags(self, obj):
+        tagged_items = getattr(obj, "_prefetched_tagged_items", [])
+        return [ti.tag.name for ti in tagged_items]
+
 
 class ManageTrackAlbumSerializer(ManageBaseAlbumSerializer):
     artist = ManageNestedArtistSerializer()
@@ -418,6 +430,7 @@ class ManageTrackSerializer(ManageNestedTrackSerializer):
     album = ManageTrackAlbumSerializer()
     attributed_to = ManageBaseActorSerializer()
     uploads_count = serializers.SerializerMethodField()
+    tags = serializers.SerializerMethodField()
 
     class Meta:
         model = music_models.Track
@@ -426,11 +439,16 @@ class ManageTrackSerializer(ManageNestedTrackSerializer):
             "album",
             "attributed_to",
             "uploads_count",
+            "tags",
         ]
 
     def get_uploads_count(self, obj):
         return getattr(obj, "uploads_count", None)
 
+    def get_tags(self, obj):
+        tagged_items = getattr(obj, "_prefetched_tagged_items", [])
+        return [ti.tag.name for ti in tagged_items]
+
 
 class ManageTrackActionSerializer(common_serializers.ActionSerializer):
     actions = [common_serializers.Action("delete", allow_all=False)]
diff --git a/api/funkwhale_api/manage/views.py b/api/funkwhale_api/manage/views.py
index 9ecd1fee2..ab6c0c9f2 100644
--- a/api/funkwhale_api/manage/views.py
+++ b/api/funkwhale_api/manage/views.py
@@ -12,6 +12,7 @@ from funkwhale_api.federation import models as federation_models
 from funkwhale_api.federation import tasks as federation_tasks
 from funkwhale_api.history import models as history_models
 from funkwhale_api.music import models as music_models
+from funkwhale_api.music import views as music_views
 from funkwhale_api.moderation import models as moderation_models
 from funkwhale_api.playlists import models as playlists_models
 from funkwhale_api.tags import models as tags_models
@@ -71,6 +72,7 @@ class ManageArtistViewSet(
                     tracks_count=Count("tracks")
                 ),
             ),
+            music_views.TAG_PREFETCH,
         )
     )
     serializer_class = serializers.ManageArtistSerializer
@@ -108,7 +110,7 @@ class ManageAlbumViewSet(
         music_models.Album.objects.all()
         .order_by("-id")
         .select_related("attributed_to", "artist")
-        .prefetch_related("tracks")
+        .prefetch_related("tracks", music_views.TAG_PREFETCH)
     )
     serializer_class = serializers.ManageAlbumSerializer
     filterset_class = filters.ManageAlbumFilterSet
@@ -152,6 +154,7 @@ class ManageTrackViewSet(
         .order_by("-id")
         .select_related("attributed_to", "artist", "album__artist")
         .annotate(uploads_count=Coalesce(Subquery(uploads_subquery), 0))
+        .prefetch_related(music_views.TAG_PREFETCH)
     )
     serializer_class = serializers.ManageTrackSerializer
     filterset_class = filters.ManageTrackFilterSet
diff --git a/api/tests/manage/test_serializers.py b/api/tests/manage/test_serializers.py
index af2a214a6..201f14ede 100644
--- a/api/tests/manage/test_serializers.py
+++ b/api/tests/manage/test_serializers.py
@@ -297,6 +297,7 @@ def test_manage_artist_serializer(factories, now):
         "attributed_to": serializers.ManageBaseActorSerializer(
             artist.attributed_to
         ).data,
+        "tags": [],
     }
     s = serializers.ManageArtistSerializer(artist)
 
@@ -387,6 +388,7 @@ def test_manage_album_serializer(factories, now):
         "attributed_to": serializers.ManageBaseActorSerializer(
             album.attributed_to
         ).data,
+        "tags": [],
     }
     s = serializers.ManageAlbumSerializer(album)
 
@@ -414,6 +416,7 @@ def test_manage_track_serializer(factories, now):
             track.attributed_to
         ).data,
         "uploads_count": 44,
+        "tags": [],
     }
     s = serializers.ManageTrackSerializer(track)
 

From 7f41aabef8198d3ed2d7e1bec4aa93897f304c9a Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Thu, 25 Jul 2019 10:57:59 +0200
Subject: [PATCH 6/8] See #432: display tags on artist/album/track admin detail
 page

---
 front/src/components/tags/List.vue             |  3 ++-
 front/src/views/admin/library/AlbumDetail.vue  | 11 +++++++++--
 front/src/views/admin/library/ArtistDetail.vue |  9 ++++++++-
 front/src/views/admin/library/TrackDetail.vue  | 10 +++++++++-
 4 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/front/src/components/tags/List.vue b/front/src/components/tags/List.vue
index 6c280822b..e5bba5b58 100644
--- a/front/src/components/tags/List.vue
+++ b/front/src/components/tags/List.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="tag-list">
     <router-link
-      :to="{name: 'library.tags.detail', params: {id: tag}}"
+      :to="{name: detailRoute, params: {id: tag}}"
       :class="['ui', 'circular', 'hashtag', 'label', labelClasses]"
       v-for="tag in toDisplay"
       :title="tag"
@@ -21,6 +21,7 @@ export default {
     truncateSize: {type: Number, default: 25},
     limit: {type: Number, default: 5},
     labelClasses: {type: String, default: ''},
+    detailRoute: {type: String, default: 'library.tags.detail'},
   },
   data () {
     return {
diff --git a/front/src/views/admin/library/AlbumDetail.vue b/front/src/views/admin/library/AlbumDetail.vue
index b89afb945..031fdaff0 100644
--- a/front/src/views/admin/library/AlbumDetail.vue
+++ b/front/src/views/admin/library/AlbumDetail.vue
@@ -24,6 +24,12 @@
                   </div>
                 </div>
               </h2>
+
+              <template v-if="object.tags && object.tags.length > 0">
+                <tags-list :limit="5" detail-route="manage.library.tags.detail" :tags="object.tags"></tags-list>
+                <div class="ui hidden divider"></div>
+              </template>
+
               <div class="header-buttons">
 
                 <div class="ui icon buttons">
@@ -273,12 +279,13 @@
 import axios from "axios"
 import logger from "@/logging"
 import FetchButton from "@/components/federation/FetchButton"
-
+import TagsList from "@/components/tags/List"
 
 export default {
   props: ["id"],
   components: {
-    FetchButton
+    FetchButton,
+    TagsList
   },
   data() {
     return {
diff --git a/front/src/views/admin/library/ArtistDetail.vue b/front/src/views/admin/library/ArtistDetail.vue
index 0c4175bae..80c6e7585 100644
--- a/front/src/views/admin/library/ArtistDetail.vue
+++ b/front/src/views/admin/library/ArtistDetail.vue
@@ -23,6 +23,11 @@
                   </div>
                 </div>
               </h2>
+              <template v-if="object.tags && object.tags.length > 0">
+                <tags-list :limit="5" detail-route="manage.library.tags.detail" :tags="object.tags"></tags-list>
+                <div class="ui hidden divider"></div>
+              </template>
+
               <div class="header-buttons">
 
                 <div class="ui icon buttons">
@@ -272,12 +277,14 @@
 import axios from "axios"
 import logger from "@/logging"
 
+import TagsList from "@/components/tags/List"
 import FetchButton from "@/components/federation/FetchButton"
 
 export default {
   props: ["id"],
   components: {
-    FetchButton
+    FetchButton,
+    TagsList
   },
   data() {
     return {
diff --git a/front/src/views/admin/library/TrackDetail.vue b/front/src/views/admin/library/TrackDetail.vue
index 29cd29810..17707c61a 100644
--- a/front/src/views/admin/library/TrackDetail.vue
+++ b/front/src/views/admin/library/TrackDetail.vue
@@ -23,6 +23,12 @@
                   </div>
                 </div>
               </h2>
+
+              <template v-if="object.tags && object.tags.length > 0">
+                <tags-list :limit="5" detail-route="manage.library.tags.detail" :tags="object.tags"></tags-list>
+                <div class="ui hidden divider"></div>
+              </template>
+
               <div class="header-buttons">
 
                 <div class="ui icon buttons">
@@ -315,12 +321,14 @@
 import axios from "axios"
 import logger from "@/logging"
 import FetchButton from "@/components/federation/FetchButton"
+import TagsList from "@/components/tags/List"
 
 
 export default {
   props: ["id"],
   components: {
-    FetchButton
+    FetchButton,
+    TagsList
   },
   data() {
     return {

From b3de851e6f01cdd49db11aa7bcd85df795b9ba8a Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Mon, 29 Jul 2019 10:17:01 +0200
Subject: [PATCH 7/8] Linting

---
 front/src/components/manage/library/TagsTable.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/components/manage/library/TagsTable.vue b/front/src/components/manage/library/TagsTable.vue
index b26e86859..d75670454 100644
--- a/front/src/components/manage/library/TagsTable.vue
+++ b/front/src/components/manage/library/TagsTable.vue
@@ -148,8 +148,8 @@ export default {
       self.isLoading = true
       self.checked = []
       axios.get('/manage/tags/', {params: params}).then((response) => {
-        self.result = response.data
         self.isLoading = false
+        self.result = response.data
       }, error => {
         self.isLoading = false
         self.errors = error.backendErrors

From 32445c51137dbd268eef245df38564529c5e069a Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Mon, 29 Jul 2019 10:44:01 +0200
Subject: [PATCH 8/8] Moved test date check into a dedicated function

---
 api/tests/conftest.py                        | 16 ++----
 api/tests/federation/test_api_serializers.py |  8 +--
 api/tests/manage/test_serializers.py         | 54 ++++++++++----------
 api/tests/music/test_serializers.py          |  4 +-
 api/tests/radios/test_serializers.py         |  4 +-
 api/tests/tags/test_serializers.py           |  7 +--
 api/tests/test_test_utils.py                 |  6 +++
 api/tests/utils.py                           | 12 +++++
 8 files changed, 59 insertions(+), 52 deletions(-)
 create mode 100644 api/tests/test_test_utils.py
 create mode 100644 api/tests/utils.py

diff --git a/api/tests/conftest.py b/api/tests/conftest.py
index d76b1665e..bf9922377 100644
--- a/api/tests/conftest.py
+++ b/api/tests/conftest.py
@@ -1,5 +1,4 @@
 import contextlib
-import datetime
 import io
 import os
 import PIL
@@ -22,7 +21,6 @@ from django.db.models import QuerySet
 
 from aioresponses import aioresponses
 from dynamic_preferences.registries import global_preferences_registry
-from rest_framework import fields as rest_fields
 from rest_framework.test import APIClient, APIRequestFactory
 
 from funkwhale_api.activity import record
@@ -30,6 +28,7 @@ from funkwhale_api.federation import actors
 from funkwhale_api.moderation import mrf
 from funkwhale_api.music import licenses
 
+from . import utils as test_utils
 
 pytest_plugins = "aiohttp.pytest_plugin"
 
@@ -297,18 +296,9 @@ def authenticated_actor(factories, mocker):
     yield actor
 
 
-@pytest.fixture
+@pytest.fixture(scope="session")
 def to_api_date():
-    def inner(value):
-        if isinstance(value, datetime.datetime):
-            f = rest_fields.DateTimeField()
-            return f.to_representation(value)
-        if isinstance(value, datetime.date):
-            f = rest_fields.DateField()
-            return f.to_representation(value)
-        raise ValueError("Invalid value: {}".format(value))
-
-    return inner
+    return test_utils.to_api_date
 
 
 @pytest.fixture()
diff --git a/api/tests/federation/test_api_serializers.py b/api/tests/federation/test_api_serializers.py
index df55df7ae..d7c5836ca 100644
--- a/api/tests/federation/test_api_serializers.py
+++ b/api/tests/federation/test_api_serializers.py
@@ -4,7 +4,7 @@ from funkwhale_api.federation import api_serializers
 from funkwhale_api.federation import serializers
 
 
-def test_library_serializer(factories):
+def test_library_serializer(factories, to_api_date):
     library = factories["music.Library"](uploads_count=5678)
     expected = {
         "fid": library.fid,
@@ -12,7 +12,7 @@ def test_library_serializer(factories):
         "actor": serializers.APIActorSerializer(library.actor).data,
         "name": library.name,
         "description": library.description,
-        "creation_date": library.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(library.creation_date),
         "uploads_count": library.uploads_count,
         "privacy_level": library.privacy_level,
         "follow": None,
@@ -34,7 +34,7 @@ def test_library_serializer_latest_scan(factories):
     assert serializer.data["latest_scan"] == expected
 
 
-def test_library_serializer_with_follow(factories):
+def test_library_serializer_with_follow(factories, to_api_date):
     library = factories["music.Library"](uploads_count=5678)
     follow = factories["federation.LibraryFollow"](target=library)
 
@@ -45,7 +45,7 @@ def test_library_serializer_with_follow(factories):
         "actor": serializers.APIActorSerializer(library.actor).data,
         "name": library.name,
         "description": library.description,
-        "creation_date": library.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(library.creation_date),
         "uploads_count": library.uploads_count,
         "privacy_level": library.privacy_level,
         "follow": api_serializers.NestedLibraryFollowSerializer(follow).data,
diff --git a/api/tests/manage/test_serializers.py b/api/tests/manage/test_serializers.py
index 201f14ede..16fd9ce58 100644
--- a/api/tests/manage/test_serializers.py
+++ b/api/tests/manage/test_serializers.py
@@ -39,13 +39,13 @@ def test_user_update_permission(factories):
     assert user.permission_settings is False
 
 
-def test_manage_domain_serializer(factories, now):
+def test_manage_domain_serializer(factories, now, to_api_date):
     domain = factories["federation.Domain"](nodeinfo_fetch_date=None)
     setattr(domain, "actors_count", 42)
     setattr(domain, "outbox_activities_count", 23)
     expected = {
         "name": domain.name,
-        "creation_date": domain.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(domain.creation_date),
         "actors_count": 42,
         "outbox_activities_count": 23,
         "nodeinfo": {},
@@ -65,14 +65,14 @@ def test_manage_domain_serializer_validates_hostname(db):
         s.is_valid(raise_exception=True)
 
 
-def test_manage_actor_serializer(factories, now):
+def test_manage_actor_serializer(factories, now, to_api_date):
     actor = factories["federation.Actor"]()
     setattr(actor, "uploads_count", 66)
     expected = {
         "id": actor.id,
         "name": actor.name,
-        "creation_date": actor.creation_date.isoformat().split("+")[0] + "Z",
-        "last_fetch_date": actor.last_fetch_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(actor.creation_date),
+        "last_fetch_date": to_api_date(actor.last_fetch_date),
         "uploads_count": 66,
         "fid": actor.fid,
         "url": actor.url,
@@ -110,13 +110,15 @@ def test_manage_actor_serializer(factories, now):
         ),
     ],
 )
-def test_instance_policy_serializer_repr(factories, factory_kwargs, expected):
+def test_instance_policy_serializer_repr(
+    factories, factory_kwargs, expected, to_api_date
+):
     policy = factories["moderation.InstancePolicy"](block_all=True, **factory_kwargs)
 
     e = {
         "id": policy.id,
         "uuid": str(policy.uuid),
-        "creation_date": policy.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(policy.creation_date),
         "actor": policy.actor.full_username,
         "block_all": True,
         "silence_activity": False,
@@ -280,7 +282,7 @@ def test_instance_policy_serializer_purges_target_actor(
     assert on_commit.call_count == 0
 
 
-def test_manage_artist_serializer(factories, now):
+def test_manage_artist_serializer(factories, now, to_api_date):
     artist = factories["music.Artist"](attributed=True)
     track = factories["music.Track"](artist=artist)
     album = factories["music.Album"](artist=artist)
@@ -291,7 +293,7 @@ def test_manage_artist_serializer(factories, now):
         "fid": artist.fid,
         "name": artist.name,
         "mbid": artist.mbid,
-        "creation_date": artist.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(artist.creation_date),
         "albums": [serializers.ManageNestedAlbumSerializer(album).data],
         "tracks": [serializers.ManageNestedTrackSerializer(track).data],
         "attributed_to": serializers.ManageBaseActorSerializer(
@@ -304,7 +306,7 @@ def test_manage_artist_serializer(factories, now):
     assert s.data == expected
 
 
-def test_manage_nested_track_serializer(factories, now):
+def test_manage_nested_track_serializer(factories, now, to_api_date):
     track = factories["music.Track"]()
     expected = {
         "id": track.id,
@@ -313,7 +315,7 @@ def test_manage_nested_track_serializer(factories, now):
         "fid": track.fid,
         "title": track.title,
         "mbid": track.mbid,
-        "creation_date": track.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(track.creation_date),
         "position": track.position,
         "disc_number": track.disc_number,
         "copyright": track.copyright,
@@ -324,7 +326,7 @@ def test_manage_nested_track_serializer(factories, now):
     assert s.data == expected
 
 
-def test_manage_nested_album_serializer(factories, now):
+def test_manage_nested_album_serializer(factories, now, to_api_date):
     album = factories["music.Album"]()
     setattr(album, "tracks_count", 44)
     expected = {
@@ -334,7 +336,7 @@ def test_manage_nested_album_serializer(factories, now):
         "fid": album.fid,
         "title": album.title,
         "mbid": album.mbid,
-        "creation_date": album.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(album.creation_date),
         "release_date": album.release_date.isoformat(),
         "cover": {
             "original": album.cover.url,
@@ -349,7 +351,7 @@ def test_manage_nested_album_serializer(factories, now):
     assert s.data == expected
 
 
-def test_manage_nested_artist_serializer(factories, now):
+def test_manage_nested_artist_serializer(factories, now, to_api_date):
     artist = factories["music.Artist"]()
     expected = {
         "id": artist.id,
@@ -358,14 +360,14 @@ def test_manage_nested_artist_serializer(factories, now):
         "fid": artist.fid,
         "name": artist.name,
         "mbid": artist.mbid,
-        "creation_date": artist.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(artist.creation_date),
     }
     s = serializers.ManageNestedArtistSerializer(artist)
 
     assert s.data == expected
 
 
-def test_manage_album_serializer(factories, now):
+def test_manage_album_serializer(factories, now, to_api_date):
     album = factories["music.Album"](attributed=True)
     track = factories["music.Track"](album=album)
     expected = {
@@ -375,7 +377,7 @@ def test_manage_album_serializer(factories, now):
         "fid": album.fid,
         "title": album.title,
         "mbid": album.mbid,
-        "creation_date": album.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(album.creation_date),
         "release_date": album.release_date.isoformat(),
         "cover": {
             "original": album.cover.url,
@@ -395,7 +397,7 @@ def test_manage_album_serializer(factories, now):
     assert s.data == expected
 
 
-def test_manage_track_serializer(factories, now):
+def test_manage_track_serializer(factories, now, to_api_date):
     track = factories["music.Track"](attributed=True)
     setattr(track, "uploads_count", 44)
     expected = {
@@ -409,7 +411,7 @@ def test_manage_track_serializer(factories, now):
         "position": track.position,
         "copyright": track.copyright,
         "license": track.license,
-        "creation_date": track.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(track.creation_date),
         "artist": serializers.ManageNestedArtistSerializer(track.artist).data,
         "album": serializers.ManageTrackAlbumSerializer(track.album).data,
         "attributed_to": serializers.ManageBaseActorSerializer(
@@ -423,7 +425,7 @@ def test_manage_track_serializer(factories, now):
     assert s.data == expected
 
 
-def test_manage_library_serializer(factories, now):
+def test_manage_library_serializer(factories, now, to_api_date):
     library = factories["music.Library"]()
     setattr(library, "followers_count", 42)
     setattr(library, "_uploads_count", 44)
@@ -438,7 +440,7 @@ def test_manage_library_serializer(factories, now):
         "name": library.name,
         "description": library.description,
         "privacy_level": library.privacy_level,
-        "creation_date": library.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(library.creation_date),
         "actor": serializers.ManageBaseActorSerializer(library.actor).data,
         "uploads_count": 44,
         "followers_count": 42,
@@ -448,7 +450,7 @@ def test_manage_library_serializer(factories, now):
     assert s.data == expected
 
 
-def test_manage_upload_serializer(factories, now):
+def test_manage_upload_serializer(factories, now, to_api_date):
     upload = factories["music.Upload"]()
 
     expected = {
@@ -466,8 +468,8 @@ def test_manage_upload_serializer(factories, now):
         "source": upload.source,
         "filename": upload.filename,
         "metadata": upload.metadata,
-        "creation_date": upload.creation_date.isoformat().split("+")[0] + "Z",
-        "modification_date": upload.modification_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(upload.creation_date),
+        "modification_date": to_api_date(upload.modification_date),
         "accessed_date": None,
         "import_date": None,
         "import_metadata": upload.import_metadata,
@@ -502,7 +504,7 @@ def test_action_serializer_delete(factory, serializer_class, factories):
     assert objects[0].__class__.objects.count() == 0
 
 
-def test_manage_tag_serializer(factories):
+def test_manage_tag_serializer(factories, to_api_date):
     tag = factories["tags.Tag"]()
 
     setattr(tag, "_tracks_count", 42)
@@ -511,7 +513,7 @@ def test_manage_tag_serializer(factories):
     expected = {
         "id": tag.id,
         "name": tag.name,
-        "creation_date": tag.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(tag.creation_date),
         "tracks_count": 42,
         "albums_count": 54,
         "artists_count": 66,
diff --git a/api/tests/music/test_serializers.py b/api/tests/music/test_serializers.py
index 8582a761c..fd0c312e5 100644
--- a/api/tests/music/test_serializers.py
+++ b/api/tests/music/test_serializers.py
@@ -118,7 +118,7 @@ def test_upload_serializer(factories, to_api_date):
         "bitrate": upload.bitrate,
         "size": upload.size,
         "library": serializers.LibraryForOwnerSerializer(upload.library).data,
-        "creation_date": upload.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(upload.creation_date),
         "import_date": None,
         "import_status": "pending",
     }
@@ -145,7 +145,7 @@ def test_upload_owner_serializer(factories, to_api_date):
         "bitrate": upload.bitrate,
         "size": upload.size,
         "library": serializers.LibraryForOwnerSerializer(upload.library).data,
-        "creation_date": upload.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(upload.creation_date),
         "metadata": {"test": "metadata"},
         "import_metadata": {"import": "metadata"},
         "import_date": None,
diff --git a/api/tests/radios/test_serializers.py b/api/tests/radios/test_serializers.py
index 54019d5e1..748bd993a 100644
--- a/api/tests/radios/test_serializers.py
+++ b/api/tests/radios/test_serializers.py
@@ -29,7 +29,7 @@ def test_create_artist_radio(factories):
     assert session.related_object == artist
 
 
-def test_tag_radio_repr(factories):
+def test_tag_radio_repr(factories, to_api_date):
     tag = factories["tags.Tag"]()
     session = factories["radios.RadioSession"](related_object=tag, radio_type="tag")
 
@@ -39,6 +39,6 @@ def test_tag_radio_repr(factories):
         "custom_radio": None,
         "user": session.user.pk,
         "related_object_id": tag.name,
-        "creation_date": session.creation_date.isoformat().split("+")[0] + "Z",
+        "creation_date": to_api_date(session.creation_date),
     }
     assert serializers.RadioSessionSerializer(session).data == expected
diff --git a/api/tests/tags/test_serializers.py b/api/tests/tags/test_serializers.py
index f962e93e4..dc3a64ae0 100644
--- a/api/tests/tags/test_serializers.py
+++ b/api/tests/tags/test_serializers.py
@@ -3,15 +3,12 @@ import pytest
 from funkwhale_api.tags import serializers
 
 
-def test_tag_serializer(factories):
+def test_tag_serializer(factories, to_api_date):
     tag = factories["tags.Tag"]()
 
     serializer = serializers.TagSerializer(tag)
 
-    expected = {
-        "name": tag.name,
-        "creation_date": tag.creation_date.isoformat().split("+")[0] + "Z",
-    }
+    expected = {"name": tag.name, "creation_date": to_api_date(tag.creation_date)}
 
     assert serializer.data == expected
 
diff --git a/api/tests/test_test_utils.py b/api/tests/test_test_utils.py
new file mode 100644
index 000000000..a17b21856
--- /dev/null
+++ b/api/tests/test_test_utils.py
@@ -0,0 +1,6 @@
+from . import utils as test_utils
+
+
+def test_to_api_date(now):
+
+    assert test_utils.to_api_date(now) == now.isoformat().split("+")[0] + "Z"
diff --git a/api/tests/utils.py b/api/tests/utils.py
new file mode 100644
index 000000000..868972aa4
--- /dev/null
+++ b/api/tests/utils.py
@@ -0,0 +1,12 @@
+import datetime
+from rest_framework import fields as rest_fields
+
+
+def to_api_date(value):
+    if isinstance(value, datetime.datetime):
+        f = rest_fields.DateTimeField()
+        return f.to_representation(value)
+    if isinstance(value, datetime.date):
+        f = rest_fields.DateField()
+        return f.to_representation(value)
+    raise ValueError("Invalid value: {}".format(value))