@datagouv/components-next 1.0.2-dev.234 → 1.0.2-dev.236

package/src/components/AvatarWithName.vue

@@ -1,29 +1,49 @@
 <template>
   <span class="inline-flex items-center space-x-1">
-    <Avatar
-      v-bind="$attrs"
-      :user="user"
-      :size
-      :rounded="true"
-    />
-    <component
-      :is="withLink ? AppLink : 'span'"
-      :to="withLink ? user.page : undefined"
-      class="truncate"
-      :class="{ 'font-bold': withLink }"
-    >
-      {{ user.first_name }}
-      {{ user.last_name }}
-    </component>
+    <!-- A deleted account has no name left to show and no page left to link to, so it
+         gets a neutral mark instead of the identicon generated from its identifier. -->
+    <template v-if="isDeleted">
+      <span
+        class="inline-flex flex-none items-center justify-center rounded-full border border-gray-default text-gray-medium"
+        :style="{ width: `${size}px`, height: `${size}px` }"
+      >
+        <RiUserLine
+          :size="String(Math.round(size * 0.6))"
+          aria-hidden="true"
+        />
+      </span>
+      <span class="rounded bg-gray-some px-1.5 py-0.5 text-[11px] leading-5 text-gray-medium">{{ t('Compte supprimé') }}</span>
+    </template>
+    <template v-else>
+      <Avatar
+        v-bind="$attrs"
+        :user="user"
+        :size
+        :rounded="true"
+      />
+      <component
+        :is="withLink ? AppLink : 'span'"
+        :to="withLink ? user.page : undefined"
+        class="truncate"
+        :class="{ 'font-bold': withLink }"
+      >
+        {{ user.first_name }}
+        {{ user.last_name }}
+      </component>
+    </template>
   </span>
 </template>
 
 <script setup lang="ts">
+import { RiUserLine } from '@remixicon/vue'
+import { computed } from 'vue'
+import { useTranslation } from '../composables/useTranslation'
+import { isDeletedUser } from '../functions/users'
 import type { User, UserReference } from '../types/users'
 import AppLink from './AppLink.vue'
 import Avatar from './Avatar.vue'
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   user: User | UserReference
   size?: number
   withLink?: boolean
@@ -31,4 +51,8 @@ withDefaults(defineProps<{
   size: 12,
   withLink: true,
 })
+
+const { t } = useTranslation()
+
+const isDeleted = computed(() => isDeletedUser(props.user))
 </script>

package/src/functions/activities.ts

@@ -34,3 +34,114 @@ export function getActivityTranslation(activity: Activity): string {
 
   return translations[activity.key] || activity.label || activity.key
 }
+
+/**
+ * `changes` holds the model attribute paths the backend recorded, which are neither
+ * translated nor meant to be read as is.
+ */
+function getChangeLabels(): Record<string, string> {
+  const { t } = useTranslation()
+
+  return {
+    // Shared across the models an activity can be about
+    'title': t('Titre'),
+    'name': t('Nom'),
+    'acronym': t('Sigle'),
+    'slug': t('Identifiant d\'URL'),
+    'description': t('Description'),
+    'description_short': t('Description courte'),
+    'tags': t('Mots-clés'),
+    'license': t('Licence'),
+    'private': t('Visibilité'),
+    'featured': t('Mise en avant'),
+    'badges': t('Badges'),
+    'owner': t('Propriétaire'),
+    'organization': t('Organisation'),
+    'archived': t('Archivage'),
+    'archived_at': t('Archivage'),
+    'archived_reason': t('Motif d\'archivage'),
+    'deleted': t('Suppression'),
+    'deleted_at': t('Suppression'),
+    'extras': t('Données supplémentaires'),
+    'url': t('URL'),
+    'created_at': t('Date de création'),
+    'created_at_internal': t('Date de création'),
+    'last_modified_internal': t('Date de modification'),
+    'spatial': t('Couverture géographique'),
+    'spatial.zones': t('Couverture géographique (zones)'),
+    'spatial.geom': t('Couverture géographique (tracé)'),
+    'spatial.granularity': t('Granularité géographique'),
+    'contact_points': t('Points de contact'),
+
+    // Dataset
+    'frequency': t('Fréquence de mise à jour'),
+    'frequency_date': t('Date de prochaine mise à jour'),
+    'temporal_coverage': t('Couverture temporelle'),
+    'schema': t('Schéma'),
+    'last_update': t('Date de dernière mise à jour'),
+    'access_type': t('Type d\'accès'),
+    'access_audiences': t('Publics concernés'),
+    'access_type_reason_category': t('Motif de restriction d\'accès'),
+
+    // Reuse
+    'type': t('Type'),
+    'image': t('Image'),
+    'datasets': t('Jeux de données'),
+    'dataservices': t('Services de données'),
+    'topic': t('Thématique'),
+
+    // Organization
+    'image_url': t('Logo'),
+    'logo': t('Logo'),
+    'business_number_id': t('Numéro SIRET'),
+    'presentation_blocs': t('Blocs de présentation'),
+    'presentation_blocs_published_at': t('Publication des blocs de présentation'),
+    'members': t('Membres'),
+    'teams': t('Équipes'),
+    'zone': t('Zone'),
+
+    // Dataservice
+    'base_api_url': t('URL de base de l\'API'),
+    'machine_documentation_url': t('Documentation machine'),
+    'technical_documentation_url': t('Documentation technique'),
+    'business_documentation_url': t('Documentation fonctionnelle'),
+    'rate_limiting': t('Limitation de débit'),
+    'rate_limiting_url': t('URL de la limitation de débit'),
+    'availability': t('Disponibilité'),
+    'availability_url': t('URL de la disponibilité'),
+    'format': t('Format'),
+    'uri': t('URI'),
+    'issued_at': t('Date de publication'),
+    'modified_at': t('Date de modification'),
+    'metadata_modified_at': t('Date de modification des métadonnées'),
+    'backend': t('Moissonnage : connecteur'),
+    'domain': t('Moissonnage : domaine'),
+    'source_id': t('Moissonnage : identifiant de la source'),
+    'source_url': t('Moissonnage : URL de la source'),
+    'remote_id': t('Moissonnage : identifiant distant'),
+    'remote_url': t('Moissonnage : URL distante'),
+
+    // Topic
+    'color': t('Couleur'),
+    'elements': t('Éléments'),
+  }
+}
+
+/**
+ * The same attribute name can mean different things depending on what the activity is
+ * about, `related_to_kind` being what tells them apart.
+ */
+const CHANGE_LABELS_BY_KIND: Record<string, Record<string, string>> = {
+  Organization: { url: 'Site web' },
+}
+
+export function getActivityChangeLabel(activity: Activity, change: string): string {
+  const { t } = useTranslation()
+  const perKind = CHANGE_LABELS_BY_KIND[activity.related_to_kind]?.[change]
+  if (perKind) return t(perKind)
+
+  const labels = getChangeLabels()
+  // An embedded attribute the backend reports on its own (`spatial.zones`) falls back
+  // to the label of the attribute holding it rather than to its raw path.
+  return labels[change] ?? labels[change.split('.')[0]!] ?? change
+}

package/src/functions/users.ts

@@ -1,9 +1,18 @@
-import type { UserReference } from '../types/users'
+import type { User, UserReference } from '../types/users'
 import { useComponentsConfig } from '../config'
 
 // Accept UserReference or UserSuggest (which has avatar_url instead of avatar_thumbnail)
 type UserWithAvatar = UserReference | (Pick<UserReference, 'id'> & { avatar_url?: string | null })
 
+/**
+ * Deleting an account anonymises it in place: the names become `DELETED` and the slug
+ * `deleted-<id>`. The slug is what identifies it, being unique and out of the user's
+ * reach, where someone may legitimately be named DELETED.
+ */
+export function isDeletedUser(user: User | UserReference): boolean {
+  return user.slug.startsWith('deleted-')
+}
+
 export function useGetUserAvatar() {
   const config = useComponentsConfig()
   return (user: UserWithAvatar, size: number) => {

package/src/main.ts

@@ -30,6 +30,7 @@ import { getDefaultDatasetConfig, getDefaultDataserviceConfig, getDefaultReuseCo
 import { useSearchFilter } from './composables/useSearchFilter'
 import type { UseSearchFilterOptions } from './composables/useSearchFilter'
 
+import ActivityActor from './components/ActivityList/ActivityActor.vue'
 import ActivityList from './components/ActivityList/ActivityList.vue'
 import UserActivityList from './components/ActivityList/UserActivityList.vue'
 import AnimatedLoader from './components/AnimatedLoader.vue'
@@ -341,6 +342,7 @@ const datagouv: Plugin<PluginConfig> = {
 export {
   datagouv,
   useComponentsConfig,
+  ActivityActor,
   ActivityList,
   AnimatedLoader,
   AppLink,

package/src/types/activity.ts

@@ -1,5 +1,5 @@
-import type { Organization } from './organizations'
-import type { User } from './users'
+import type { OrganizationReference } from './organizations'
+import type { UserReference } from './users'
 
 export type ActivityKey = 'dataset:created' | 'dataset:updated' | 'dataset:deleted' | 'dataset:discussed' | 'dataset:followed'
   | 'dataset:resource:added' | 'dataset:resource:updated' | 'dataset:resource:deleted'
@@ -8,9 +8,29 @@ export type ActivityKey = 'dataset:created' | 'dataset:updated' | 'dataset:delet
   | 'reuse:created' | 'reuse:updated' | 'reuse:deleted' | 'reuse:discussed' | 'reuse:followed'
   | 'user:followed' | 'topic:created' | 'topic:updated'
 
+/**
+ * Who an action is attributed to. Not necessarily a person: harvesting and API tokens
+ * act on their own behalf. `class` is the discriminator every API reference carries.
+ */
+export type ActivityActor
+  = | UserReference
+    | { class: 'HarvestSource', id: string, name: string }
+    | { class: 'ApiToken', id: string, name: string }
+
+export type ActivityExtras = {
+  /** Set on the `dataset:resource:*` keys. */
+  resource_id?: string
+  /**
+   * Copied when the activity is emitted, so a resource removed or renamed since still
+   * reads under the name it had that day. Absent from the activities recorded before
+   * the backend started storing it.
+   */
+  resource_title?: string
+}
+
 export type Activity = {
-  actor: User
-  organization: Organization | null
+  actor: ActivityActor
+  organization: OrganizationReference | null
   related_to: string
   related_to_id: string
   related_to_kind: string
@@ -19,6 +39,6 @@ export type Activity = {
   label: string
   key: ActivityKey
   icon: string
-  extras: Record<string, unknown>
+  extras: ActivityExtras
   changes?: Array<string>
 }