Added JSON preview to entities

fgatti675 · fgatti675 · commit fc0858e9457d · 2025-03-11T22:01:21.000+01:00
diff --git a/packages/firecms_core/package.json b/packages/firecms_core/package.json
@@ -62,6 +62,7 @@
     "markdown-it": "^14.1.0",
     "notistack": "^3.0.2",
     "object-hash": "^3.0.0",
+    "prism-react-renderer": "^2.4.1",
     "react-dropzone": "^14.3.5",
     "react-fast-compare": "^3.2.2",
     "react-image-file-resizer": "^0.4.8",
diff --git a/packages/firecms_core/src/components/EntityJsonPreview.tsx b/packages/firecms_core/src/components/EntityJsonPreview.tsx
@@ -0,0 +1,30 @@
+import { Highlight, themes } from "prism-react-renderer"
+import { useModeController } from "../hooks";
+
+export function EntityJsonPreview({ values }: { values: object }) {
+    const code = JSON.stringify(values, null, "\t");
+    const { mode } = useModeController();
+
+    return <Highlight
+        theme={mode === "dark" ? themes.vsDark : themes.vsLight}
+        code={code}
+        language="json">
+        {({
+              className,
+              style,
+              tokens,
+              getLineProps,
+              getTokenProps
+          }) => (
+            <pre style={{ ...style, background: "inherit" }} className={"container mx-auto p-8 rounded text-sm"}>
+    {tokens.map((line, i) => (
+        <div key={i} {...getLineProps({ line })} style={{ textWrap: "wrap" }}>
+            {line.map((token, key) => (
+                <span key={key} {...getTokenProps({ token })} />
+            ))}
+        </div>
+    ))}
+</pre>
+        )}
+    </Highlight>
+}
diff --git a/packages/firecms_core/src/core/EntityEditView.tsx b/packages/firecms_core/src/core/EntityEditView.tsx
@@ -16,12 +16,14 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
 import { getEntityFromCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
+import { EntityJsonPreview } from "../components/EntityJsonPreview";
 
-const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
+export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+export const JSON_TAB_VALUE = "__json";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -141,7 +143,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        barActions,
                                                                        status,
                                                                        setStatus,
-                                                                       formProps,
+                                                                       formProps
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
@@ -186,7 +188,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews;
     const customViewsCount = customViews?.length ?? 0;
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+    const includeJsonView = true;
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
     const {
         resolvedEntityViews,
@@ -229,6 +232,17 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const globalLoading = dataLoading && !usedEntity;
 
+    const jsonView = <div
+        className={cls("relative flex-1 h-full overflow-auto w-full",
+            { "hidden": selectedTab !== JSON_TAB_VALUE })}
+        key={"json_view"}
+        role="tabpanel">
+        <ErrorBoundary>
+            <EntityJsonPreview
+                values={formContext?.values ?? {}}/>
+        </ErrorBoundary>
+    </div>;
+
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
         const subcollectionId = subcollection.id ?? subcollection.path;
         const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
@@ -269,7 +283,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 path,
                 entityId,
                 selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
-                collection,
+                collection
             });
         }
     };
@@ -303,7 +317,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         onSaved={(params) => {
             const res = {
                 ...params,
-                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
             };
             onSaved?.(res);
             formProps?.onSaved?.(res);
@@ -350,13 +364,22 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     onSideTabClick(value);
                 }}>
 
+                {includeJsonView && <Tab
+                    disabled={!hasAdditionalViews}
+                    value={JSON_TAB_VALUE}
+                    innerClassName={"block"}
+                    className={"text-sm"}>
+                    <CodeIcon size={"small"}/>
+                </Tab>}
+
                 <Tab
                     disabled={!hasAdditionalViews}
                     value={MAIN_TAB_VALUE}
                     className={"text-sm min-w-[120px]"}>
                     {collection.singularName ?? collection.name}
                 </Tab>
 
+
                 {customViewTabs}
 
                 {subcollectionTabs}
@@ -369,7 +392,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </div>
             : entityView}
 
-        {/*{secondaryForms}*/}
+        {jsonView}
 
         {customViewsView}
 
diff --git a/packages/firecms_core/src/internal/useBuildSideEntityController.tsx b/packages/firecms_core/src/internal/useBuildSideEntityController.tsx
@@ -20,6 +20,7 @@ import {
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
 import { useCustomizationController, useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
+import { JSON_TAB_VALUE } from "../core/EntityEditView";
 
 const NEW_URL_HASH = "new_side";
 const SIDE_URL_HASH = "side";
@@ -31,7 +32,7 @@ export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: bool
         selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
 
-    const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || Boolean(selectedSecondaryForm);
 
     let resolvedWidth: string | undefined;
     if (props.width) {
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
@@ -2,21 +2,22 @@
 import React from "react";
 import { cls } from "../util";
 
-export type ButtonProps<P extends React.ElementType> =
-    Omit<(P extends "button" ? React.ButtonHTMLAttributes<HTMLButtonElement> : React.ComponentProps<P>), "onClick">
-    & {
+export type ButtonProps<C extends React.ElementType = "button"> = {
+    children?: React.ReactNode;
     variant?: "filled" | "neutral" | "outlined" | "text";
     disabled?: boolean;
     color?: "primary" | "secondary" | "text" | "error";
     size?: "small" | "medium" | "large" | "xl" | "2xl";
     startIcon?: React.ReactNode;
     fullWidth?: boolean;
     className?: string;
-    onClick?: React.MouseEventHandler<any>
-};
+    component?: C;
+    onClick?: React.MouseEventHandler<any>;
+} & React.ComponentPropsWithoutRef<C>;
 
 const ButtonInner = React.forwardRef<
-    ButtonProps<React.ElementType<any>>
+    HTMLButtonElement,
+    ButtonProps<React.ElementType>
 >(({
        children,
        className,
@@ -44,8 +45,8 @@ const ButtonInner = React.forwardRef<
         "border border-surface-accent-200 bg-surface-accent-200 hover:bg-surface-accent-300 focus:ring-surface-accent-400 shadow hover:ring-1 hover:ring-surface-accent-400 text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark": variant === "filled" && color === "text" && !disabled,
 
         // Text Variants
-        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 dark:hover:bg-surface-900": variant === "text" && color === "primary" && !disabled,
-        "border border-transparent text-secondary hover:text-secondary hover:bg-secondary-bg": variant === "text" && color === "secondary" && !disabled,
+        "border border-transparent text-primary hover:text-primary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": variant === "text" && color === "primary" && !disabled,
+        "border border-transparent text-secondary hover:text-secondary hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800": variant === "text" && color === "secondary" && !disabled,
         "border border-transparent text-red-500 hover:text-red-500 hover:bg-red-500 hover:bg-opacity-10": variant === "text" && color === "error" && !disabled,
         "border border-transparent text-text-primary hover:text-text-primary dark:text-text-primary-dark hover:dark:text-text-primary-dark hover:bg-surface-accent-200 hover:dark:bg-surface-700": variant === "text" && color === "text" && !disabled,
 
@@ -83,7 +84,7 @@ const ButtonInner = React.forwardRef<
                 ref={ref}
                 onClick={props.onClick}
                 className={cls(startIcon ? "pl-3" : "", baseClasses, buttonClasses, sizeClasses, className)}
-                {...(props as React.ComponentPropsWithRef<any>)}>
+                {...props}>
                 {startIcon}
                 {children}
             </Component>
diff --git a/packages/ui/src/components/Menubar.tsx b/packages/ui/src/components/Menubar.tsx
@@ -44,7 +44,7 @@ export function MenubarTrigger({
     return (
         <MenubarPrimitive.Trigger
             onSelect={onSelect}
-            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-700 dark:hover:bg-opacity-50",
+            className={cls("py-2 px-3 outline-none select-none font-medium leading-none rounded text-text-primary dark:text-text-primary-dark text-[13px] flex items-center justify-between gap-[2px] data-[highlighted]:bg-surface-accent-100 data-[highlighted]:dark:bg-surface-800 data-[state=open]:bg-surface-accent-100 data-[state=open]:dark:bg-surface-800 hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
                 className)}>
             {children}
         </MenubarPrimitive.Trigger>
