@firecms/entity_history 3.0.1 → 3.1.0-canary.02232f4

package/src/components/EntityHistoryView.tsx

@@ -7,7 +7,8 @@ import {
     ErrorBoundary,
     useAuthController,
     useDataSource,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation
 } from "@firecms/core";
 import { cls, HistoryIcon, IconButton, Label, Tooltip, Typography } from "@firecms/ui";
 import { EntityHistoryEntry } from "./EntityHistoryEntry";
@@ -20,6 +21,7 @@ export function EntityHistoryView({
 
     const authController = useAuthController();
     const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
     const dirty = formContext?.formex.dirty;
 
     const dataSource = useDataSource();
@@ -114,7 +116,7 @@ export function EntityHistoryView({
 
     if (!entity) {
         return <div className="flex items-center justify-center h-full">
-            <Label>History is only available for existing entities</Label>
+            <Label>{t("entity_history_only_existing")}</Label>
         </div>
     }
 
@@ -152,14 +154,14 @@ export function EntityHistoryView({
                     });
                     setRevertVersionDialog(undefined);
                     snackbarController.open({
-                        message: "Reverted version",
+                        message: t("entity_history_reverted"),
                         type: "info"
                     });
                 }
             ).catch((error) => {
                 console.error("Error reverting entity:", error);
                 snackbarController.open({
-                    message: "Error reverting entity",
+                    message: t("entity_history_error_reverting"),
                     type: "error"
                 });
             });
@@ -172,15 +174,15 @@ export function EntityHistoryView({
         <div className="flex flex-col gap-2 max-w-6xl mx-auto w-full">
 
             <Typography variant={"h5"} className={"mt-24 ml-4"}>
-                History
+                {t("history")}
             </Typography>
 
             {revisions.length === 0 && <>
                 <Label className={"ml-4 mt-8"}>
-                    No history available
+                    {t("entity_history_no_history")}
                 </Label>
                 <Typography variant={"caption"} className={"ml-4"}>
-                    When you save an entity, a new version is created and stored in the history.
+                    {t("entity_history_when_save")}
                 </Typography>
             </>}
 
@@ -194,13 +196,13 @@ export function EntityHistoryView({
                                         previewKeys={previewKeys}
                                         previousValues={previousValues}
                                         actions={
-                                            <Tooltip title={"Revert to this version"}
+                                            <Tooltip title={t("entity_history_revert_tooltip")}
                                                      className={"m-2 grow-0 self-start"}>
                                                 <IconButton
                                                     onClick={() => {
                                                         if (dirty) {
                                                             snackbarController.open({
-                                                                message: "Please save or discard your changes before reverting",
+                                                                message: t("entity_history_please_save"),
                                                                 type: "warning"
                                                             });
                                                         } else {
@@ -220,8 +222,8 @@ export function EntityHistoryView({
                     ref={loadMoreRef}
                     className="py-4 text-center"
                 >
-                    {isLoading && <Label>Loading more...</Label>}
-                    {!hasMore && revisions.length > PAGE_SIZE && <Label>No more history available</Label>}
+                    {isLoading && <Label>{t("loading_more")}</Label>}
+                    {!hasMore && revisions.length > PAGE_SIZE && <Label>{t("entity_history_no_more")}</Label>}
                 </div>
             )}
         </div>
@@ -235,7 +237,7 @@ export function EntityHistoryView({
                                 onCancel={function (): void {
                                     setRevertVersionDialog(undefined);
                                 }}
-                                title={<Typography variant={"subtitle2"}>Revert data to this version?</Typography>}
+                                title={<Typography variant={"subtitle2"}>{t("entity_history_revert_dialog_title")}</Typography>}
                                 body={revertVersionDialog ?
                                     <EntityView entity={revertVersionDialog}
                                                 collection={collection}

package/src/components/LastEditedByIndicator.tsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useState } from "react";
+import { Entity, useDataSource, User, useTranslation } from "@firecms/core";
+import { useHistoryController } from "../HistoryControllerProvider";
+
+function getRelativeTimeString(date: Date, t: any): string {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSeconds = Math.floor(diffMs / 1000);
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSeconds < 60) return t("entity_history_just_now");
+    if (diffMinutes < 60) return t("entity_history_minutes_ago", { minutes: diffMinutes });
+    if (diffHours < 24) return t("entity_history_hours_ago", { hours: diffHours });
+    if (diffDays < 30) return t("entity_history_days_ago", { days: diffDays });
+    return date.toLocaleDateString();
+}
+
+/**
+ * Fetches the latest history entry from the __history subcollection
+ * and displays who last edited the entity and when.
+ */
+export function LastEditedByIndicator({
+    path,
+    entityId,
+    collection
+}: {
+    path: string;
+    entityId: string;
+    collection: any;
+}) {
+    const { t } = useTranslation();
+    const { getUser } = useHistoryController();
+    const dataSource = useDataSource();
+    const [latestEntry, setLatestEntry] = useState<Entity | undefined>();
+
+    useEffect(() => {
+        if (!path || !entityId) return;
+
+        const historyPath = `${path}/${entityId}/__history`;
+        const unsubscribe = dataSource.listenCollection?.({
+            path: historyPath,
+            collection,
+            orderBy: "__metadata.updated_on",
+            order: "desc",
+            limit: 1,
+            onUpdate: (entities) => {
+                setLatestEntry(entities[0]);
+            },
+            onError: (error) => {
+                console.error("Error fetching latest history entry:", error);
+            }
+        });
+
+        return () => {
+            if (typeof unsubscribe === "function") {
+                unsubscribe();
+            }
+        };
+    }, [path, entityId, dataSource]);
+
+    const metadata = latestEntry?.values?.__metadata;
+    const uid = metadata?.updated_by;
+    const editedOn = metadata?.updated_on;
+
+    const hasData = Boolean(uid || editedOn);
+
+    const user: User | null | undefined = uid ? getUser?.(uid) : undefined;
+    const date = editedOn instanceof Date ? editedOn : (editedOn?.toDate ? editedOn.toDate() : null);
+    const timeString = date ? getRelativeTimeString(date, t) : null;
+
+    const displayName = user?.displayName ?? user?.email ?? uid;
+    const photoURL = user?.photoURL;
+
+    return (
+        <div className="flex items-center gap-2 text-xs text-text-secondary dark:text-text-secondary-dark min-h-6">
+            {hasData && <>
+                {photoURL ? (
+                    <img
+                        src={photoURL}
+                        alt={displayName ?? "User"}
+                        className="rounded-full object-cover w-6 h-6"
+                    />
+                ) : (
+                    <div className="rounded-full bg-primary/10 dark:bg-primary-dark/20 flex items-center justify-center text-primary dark:text-primary-dark font-medium w-6 h-6 text-xs">
+                        {(displayName ?? "?").charAt(0).toUpperCase()}
+                    </div>
+                )}
+                <span>
+                    {displayName}{timeString ? ` · ${timeString}` : ""}
+                </span>
+            </>}
+        </div>
+    );
+}

package/src/components/LastEditedByPluginComponents.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { PluginFormActionProps } from "@firecms/core";
+import { LastEditedByIndicator } from "./LastEditedByIndicator";
+
+/**
+ * Renders the "last edited by" indicator in the entity form top bar.
+ * Used as a plugin `form.ActionsTop` component.
+ */
+export function LastEditedByFormAction({
+    entityId,
+    path,
+    status,
+    collection,
+}: PluginFormActionProps) {
+    if (status === "new" || status === "copy" || !entityId) return null;
+    if (!collection.history) return null;
+
+    return <LastEditedByIndicator
+        path={path}
+        entityId={entityId}
+        collection={collection}
+    />;
+}

package/src/components/UserChip.tsx

@@ -1,13 +1,14 @@
-import { User } from "@firecms/core";
+import { User, useTranslation } from "@firecms/core";
 import { Chip, Tooltip } from "@firecms/ui";
 
 export function UserChip({ user }: { user: User }) {
+    const { t } = useTranslation();
     return (
         <Tooltip title={user.email ?? user.uid}>
             <Chip size={"small"} className={"flex items-center"}>
                 {user.photoURL && <img
                     className={"rounded-full w-6 h-6 mr-2"}
-                    src={user.photoURL} alt={user.displayName ?? "User picture"}/>}
+                    src={user.photoURL} alt={user.displayName ?? t("user_picture")}/>}
                 <span>{user.displayName ?? user.email ?? user.uid}</span>
             </Chip>
         </Tooltip>

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./useEntityHistoryPlugin";
 export * from "./HistoryControllerProvider";
 export { createHistoryEntry } from "./entity_history_callbacks";
+export { LastEditedByIndicator } from "./components/LastEditedByIndicator";
 export * from "./types";

package/src/locales/de.ts

@@ -0,0 +1,20 @@
+export const entityHistoryTranslationsDe = {
+    history: "Verlauf",
+    entity_history_only_existing: "Verlauf ist nur für vorhandene Entitäten verfügbar",
+    entity_history_reverted: "Wiederhergestellte Version",
+    entity_history_error_reverting: "Fehler beim Wiederherstellen der Entität",
+    entity_history_no_history: "Kein Verlauf verfügbar",
+    entity_history_when_save: "Wenn Sie eine Entität speichern, wird eine neue Version erstellt und im Verlauf gespeichert.",
+    entity_history_revert_tooltip: "Zu dieser Version zurückkehren",
+    entity_history_please_save: "Bitte speichern oder verwerfen Sie Ihre Änderungen vor der Wiederherstellung",
+    loading_more: "Mehr laden...",
+    entity_history_no_more: "Kein weiterer Verlauf verfügbar",
+    entity_history_revert_dialog_title: "Daten auf diese Version zurücksetzen?",
+    entity_history_previous_value: "Vorheriger Wert",
+    entity_history_see_details: "Details zu dieser Überarbeitung anzeigen",
+    entity_history_just_now: "gerade eben",
+    entity_history_minutes_ago: "vor {{minutes}}m",
+    entity_history_hours_ago: "vor {{hours}}h",
+    entity_history_days_ago: "vor {{days}}d",
+    user_picture: "Benutzerbild"
+};

package/src/locales/en.ts

@@ -0,0 +1,20 @@
+export const entityHistoryTranslationsEn = {
+    history: "History",
+    entity_history_only_existing: "History is only available for existing entities",
+    entity_history_reverted: "Reverted version",
+    entity_history_error_reverting: "Error reverting entity",
+    entity_history_no_history: "No history available",
+    entity_history_when_save: "When you save an entity, a new version is created and stored in the history.",
+    entity_history_revert_tooltip: "Revert to this version",
+    entity_history_please_save: "Please save or discard your changes before reverting",
+    loading_more: "Loading more...",
+    entity_history_no_more: "No more history available",
+    entity_history_revert_dialog_title: "Revert data to this version?",
+    entity_history_previous_value: "Previous value",
+    entity_history_see_details: "See details for this revision",
+    entity_history_just_now: "just now",
+    entity_history_minutes_ago: "{{minutes}}m ago",
+    entity_history_hours_ago: "{{hours}}h ago",
+    entity_history_days_ago: "{{days}}d ago",
+    user_picture: "User picture"
+};

package/src/locales/es.ts

@@ -0,0 +1,20 @@
+export const entityHistoryTranslationsEs = {
+    history: "Historial",
+    entity_history_only_existing: "El historial solo está disponible para entidades existentes",
+    entity_history_reverted: "Versión revertida",
+    entity_history_error_reverting: "Error al revertir la entidad",
+    entity_history_no_history: "No hay historial disponible",
+    entity_history_when_save: "Cuando guardas una entidad, se crea una nueva versión y se almacena en el historial.",
+    entity_history_revert_tooltip: "Revertir a esta versión",
+    entity_history_please_save: "Por favor, guarda o descarta tus cambios antes de revertir",
+    loading_more: "Cargando más...",
+    entity_history_no_more: "No hay más historial disponible",
+    entity_history_revert_dialog_title: "¿Revertir datos a esta versión?",
+    entity_history_previous_value: "Valor anterior",
+    entity_history_see_details: "Ver detalles de esta revisión",
+    entity_history_just_now: "justo ahora",
+    entity_history_minutes_ago: "hace {{minutes}}m",
+    entity_history_hours_ago: "hace {{hours}}h",
+    entity_history_days_ago: "hace {{days}}d",
+    user_picture: "Foto de usuario"
+};

package/src/locales/fr.ts

@@ -0,0 +1,20 @@
+export const entityHistoryTranslationsFr = {
+    history: "Historique",
+    entity_history_only_existing: "L'historique n'est disponible que pour les entités existantes",
+    entity_history_reverted: "Version restaurée",
+    entity_history_error_reverting: "Erreur lors de la restauration de l'entité",
+    entity_history_no_history: "Aucun historique disponible",
+    entity_history_when_save: "Lorsque vous enregistrez une entité, une nouvelle version est créée et stockée dans l'historique.",
+    entity_history_revert_tooltip: "Revenir à cette version",
+    entity_history_please_save: "Veuillez enregistrer ou annuler vos modifications avant de restaurer",
+    loading_more: "Chargement en cours...",
+    entity_history_no_more: "Aucun autre historique disponible",
+    entity_history_revert_dialog_title: "Restaurer les données à cette version ?",
+    entity_history_previous_value: "Valeur précédente",
+    entity_history_see_details: "Voir les détails de cette révision",
+    entity_history_just_now: "à l'instant",
+    entity_history_minutes_ago: "il y a {{minutes}}m",
+    entity_history_hours_ago: "il y a {{hours}}h",
+    entity_history_days_ago: "il y a {{days}}j",
+    user_picture: "Photo de l'utilisateur"
+};

package/src/locales/hi.ts

@@ -0,0 +1,20 @@
+export const entityHistoryTranslationsHi = {
+    history: "इतिहास",
+    entity_history_only_existing: "इतिहास केवल मौजूद संस्थाओं के लिए उपलब्ध है",
+    entity_history_reverted: "परिवर्तित संस्करण",
+    entity_history_error_reverting: "संस्था को वापस लाने में त्रुटि",
+    entity_history_no_history: "कोई इतिहास उपलब्ध नहीं",
+    entity_history_when_save: "जब आप किसी संस्था को सहेजते हैं, तो एक नया संस्करण बनाया जाता है और इतिहास में संग्रहीत किया जाता है।",
+    entity_history_revert_tooltip: "इस संस्करण पर वापस जाएं",
+    entity_history_please_save: "कृपया वापस जाने से पहले अपने परिवर्तनों को सहेजें या हटा दें",
+    loading_more: "और लोड हो रहा है...",
+    entity_history_no_more: "कोई और इतिहास उपलब्ध नहीं",
+    entity_history_revert_dialog_title: "डेटा को इस संस्करण में वापस लाएँ?",
+    entity_history_previous_value: "पिछला मान",
+    entity_history_see_details: "इस संशोधन के लिए विवरण यहाँ देखें",
+    entity_history_just_now: "अभी-अभी",
+    entity_history_minutes_ago: "{{minutes}}m पहले",
+    entity_history_hours_ago: "{{hours}}h पहले",
+    entity_history_days_ago: "{{days}}d पहले",
+    user_picture: "उपयोगकर्ता चित्र"
+};

package/src/locales/it.ts

@@ -0,0 +1,20 @@
+export const entityHistoryTranslationsIt = {
+    history: "Cronologia",
+    entity_history_only_existing: "La cronologia è disponibile solo per le entità esistenti",
+    entity_history_reverted: "Versione ripristinata",
+    entity_history_error_reverting: "Errore durante il ripristino dell'entità",
+    entity_history_no_history: "Nessuna cronologia disponibile",
+    entity_history_when_save: "Quando salvi un'entità, viene creata una nuova versione e memorizzata nella cronologia.",
+    entity_history_revert_tooltip: "Ripristina a questa versione",
+    entity_history_please_save: "Salva o annulla le modifiche prima del ripristino",
+    loading_more: "Caricamento in corso...",
+    entity_history_no_more: "Nessuna ulteriore cronologia disponibile",
+    entity_history_revert_dialog_title: "Vuoi ripristinare i dati a questa versione?",
+    entity_history_previous_value: "Valore precedente",
+    entity_history_see_details: "Vedi i dettagli per questa revisione",
+    entity_history_just_now: "proprio adesso",
+    entity_history_minutes_ago: "{{minutes}} min fa",
+    entity_history_hours_ago: "{{hours}} h fa",
+    entity_history_days_ago: "{{days}} g fa",
+    user_picture: "Immagine utente"
+};

package/src/locales/pt.ts

@@ -0,0 +1,20 @@
+export const entityHistoryTranslationsPt = {
+    history: "Histórico",
+    entity_history_only_existing: "O histórico está disponível apenas para entidades existentes",
+    entity_history_reverted: "Versão revertida",
+    entity_history_error_reverting: "Erro ao reverter entidade",
+    entity_history_no_history: "Sem histórico disponível",
+    entity_history_when_save: "Quando guarda uma entidade, é criada uma nova versão e armazenada no histórico.",
+    entity_history_revert_tooltip: "Reverter para esta versão",
+    entity_history_please_save: "Por favor guarde ou descarte as suas alterações antes de reverter",
+    loading_more: "A carregar mais...",
+    entity_history_no_more: "Sem mais histórico disponível",
+    entity_history_revert_dialog_title: "Reverter dados para esta versão?",
+    entity_history_previous_value: "Valor anterior",
+    entity_history_see_details: "Ver detalhes desta revisão",
+    entity_history_just_now: "agora mesmo",
+    entity_history_minutes_ago: "há {{minutes}}m",
+    entity_history_hours_ago: "há {{hours}}h",
+    entity_history_days_ago: "há {{days}}d",
+    user_picture: "Foto do utilizador"
+};

package/src/types.ts

@@ -19,4 +19,3 @@ export interface NewHistoryEntryParams<T = any> {
     entityId: string;
     collection?: EntityCollection;
 }
-

package/src/useEntityHistoryPlugin.tsx

@@ -1,27 +1,35 @@
 import { useCallback, useMemo } from "react";
-import { EntityCollection, FireCMSPlugin, mergeCallbacks, User } from "@firecms/core";
+import { EntityCollection, FireCMSPlugin, mergeCallbacks, User, useTranslation } from "@firecms/core";
 import { EntityHistoryView } from "./components/EntityHistoryView";
 import { HistoryIcon } from "@firecms/ui";
 import { entityHistoryCallbacks } from "./entity_history_callbacks";
 import { HistoryControllerProvider } from "./HistoryControllerProvider";
+import { LastEditedByFormAction } from "./components/LastEditedByPluginComponents";
+import { entityHistoryTranslationsEn } from "./locales/en";
+import { entityHistoryTranslationsEs } from "./locales/es";
+import { entityHistoryTranslationsDe } from "./locales/de";
+import { entityHistoryTranslationsFr } from "./locales/fr";
+import { entityHistoryTranslationsIt } from "./locales/it";
+import { entityHistoryTranslationsHi } from "./locales/hi";
+import { entityHistoryTranslationsPt } from "./locales/pt";
 
 /**
  * This plugin adds a history view to the entity side panel.
  */
 export function useEntityHistoryPlugin(props?: EntityHistoryPluginProps): FireCMSPlugin<any, any, any, EntityHistoryPluginProps> {
-
     const { defaultEnabled = false } = props ?? {};
 
     const modifyCollection = useCallback((collection: EntityCollection) => {
         if (collection.history === true || (defaultEnabled && collection.history !== false)) {
             return {
                 ...collection,
+                history: true,
                 entityViews: [
                     ...(collection.entityViews ?? []),
                     {
                         key: "__history",
                         name: "History",
-                        tabComponent: <HistoryIcon size={"small"}/>,
+                        tabComponent: <HistoryIcon size={"small"} />,
                         Builder: EntityHistoryView,
                         position: "start"
                     }
@@ -40,8 +48,20 @@ export function useEntityHistoryPlugin(props?: EntityHistoryPluginProps): FireCM
                 getUser: props?.getUser
             }
         },
+        form: {
+            BeforeTitle: LastEditedByFormAction
+        },
         collection: {
             modifyCollection
+        },
+        i18n: {
+            en: entityHistoryTranslationsEn,
+            es: entityHistoryTranslationsEs,
+            de: entityHistoryTranslationsDe,
+            fr: entityHistoryTranslationsFr,
+            it: entityHistoryTranslationsIt,
+            hi: entityHistoryTranslationsHi,
+            pt: entityHistoryTranslationsPt
         }
     } satisfies FireCMSPlugin), [props]);
 }