@firecms/core 3.0.0-canary.4 → 3.0.0-canary.41

package/src/hooks/useValidateAuthenticator.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import equal from "react-fast-compare";
+
+import { AppCheckTokenResult, AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
+
+/**
+ * This hook is used internally for validating an authenticator.
+ *
+ * @param authController
+ * @param authentication
+ * @param getAppCheckToken
+ * @param appCheckForceRefresh
+ * @param storageSource
+ * @param dataSourceDelegate
+ */
+export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>({
+                                                                                                                                                   disabled,
+                                                                                                                                                   authController,
+                                                                                                                                                   authenticator,
+                                                                                                                                                   getAppCheckToken,
+                                                                                                                                                   appCheckForceRefresh = false,
+                                                                                                                                                   storageSource,
+                                                                                                                                                   dataSourceDelegate
+                                                                                                                                               }:
+                                                                                                                                                   {
+                                                                                                                                                       disabled?: boolean,
+                                                                                                                                                       authController: Controller,
+                                                                                                                                                       authenticator?: boolean | Authenticator<UserType, Controller>,
+                                                                                                                                                       getAppCheckToken?: (forceRefresh: boolean) => Promise<AppCheckTokenResult> | undefined,
+                                                                                                                                                       appCheckForceRefresh?: boolean,
+                                                                                                                                                       dataSourceDelegate: DataSourceDelegate;
+                                                                                                                                                       storageSource: StorageSource;
+                                                                                                                                                   }): {
+    canAccessMainView: boolean,
+    authLoading: boolean,
+    notAllowedError: any,
+    authVerified: boolean,
+} {
+
+    const authenticationEnabled = Boolean(authenticator);
+
+    const [authLoading, setAuthLoading] = useState<boolean>(authenticationEnabled);
+    const [notAllowedError, setNotAllowedError] = useState<any>(false);
+    const [authVerified, setAuthVerified] = useState<boolean>(!authenticationEnabled || Boolean(authController.loginSkipped));
+
+    const canAccessMainView = (authVerified) &&
+        (!authenticationEnabled || Boolean(authController.user) || Boolean(authController.loginSkipped)) &&
+        !notAllowedError;
+
+    useEffect(() => {
+        if (authController.loginSkipped)
+            setAuthVerified(true);
+    }, [authController.loginSkipped]);
+
+    /**
+     * We use this ref to check the authentication only if the user has
+     * changed.
+     */
+    const checkedUserRef = useRef<User | undefined>();
+
+    const checkAuthentication = useCallback(async () => {
+
+        if (disabled) {
+            return;
+        }
+
+        if (authController.initialLoading) {
+            return;
+        }
+
+        if (!authController.user && !authController.loginSkipped) {
+            checkedUserRef.current = undefined;
+            setAuthLoading(false);
+            setAuthVerified(false);
+            return;
+        }
+
+        const delegateUser = authController.user;
+        console.debug("Checking authentication for user", delegateUser);
+
+        if (getAppCheckToken) {
+            try {
+                if (!await getAppCheckToken(appCheckForceRefresh)) {
+                    setNotAllowedError("App Check failed.");
+                    authController.signOut();
+                } else {
+                    console.debug("App Check success.");
+                }
+            } catch (e: any) {
+                setNotAllowedError(e.message);
+                authController.signOut();
+            }
+        }
+
+        if (authenticator instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
+            setAuthLoading(true);
+            try {
+                const allowed = await authenticator({
+                    user: delegateUser,
+                    authController,
+                    dataSourceDelegate,
+                    storageSource
+                });
+                if (!allowed) {
+                    authController.signOut();
+                    setNotAllowedError(true);
+                }
+            } catch (e) {
+                setNotAllowedError(e);
+                authController.signOut();
+            }
+            setAuthLoading(false);
+            setAuthVerified(true);
+            checkedUserRef.current = delegateUser;
+        } else {
+            setAuthLoading(false);
+        }
+
+        if (!authController.initialLoading && !delegateUser) {
+            setAuthVerified(true);
+        }
+
+    }, [disabled, authController, authenticator, getAppCheckToken, appCheckForceRefresh, dataSourceDelegate, storageSource]);
+
+    useEffect(() => {
+        checkAuthentication();
+    }, [checkAuthentication]);
+
+    return {
+        canAccessMainView,
+        authLoading: authenticationEnabled && authLoading,
+        notAllowedError,
+        authVerified
+    }
+}

package/src/internal/useBuildDataSource.ts

@@ -330,6 +330,10 @@ export function useBuildDataSource({
  * bindings.
  * Also, Firestore references are replaced with {@link EntityReference}
  * @param data
+ * @param buildReference
+ * @param buildGeoPoint
+ * @param buildDate
+ * @param buildDelete
  * @group Firestore
  */
 export function cmsToDelegateModel(data: any,
@@ -340,6 +344,8 @@ export function cmsToDelegateModel(data: any,
 ): any {
     if (data === undefined) {
         return buildDelete();
+    } else if (data === null) {
+        return null;
     } else if (Array.isArray(data)) {
         return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
     } else if (data.isEntityReference && data.isEntityReference()) {
@@ -355,4 +361,3 @@ export function cmsToDelegateModel(data: any,
     }
     return data;
 }
-

package/src/internal/useBuildSideEntityController.tsx

@@ -34,6 +34,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     // only on initialisation, create panels from URL
     useEffect(() => {
         if (!navigation.loading && !initialised.current) {
+            console.debug("Initialising side entity controller");
             if (navigation.isUrlCollectionPath(location.pathname)) {
                 const newFlag = location.hash === `#${NEW_URL_HASH}`;
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
@@ -42,15 +43,17 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                     const panel = panelsFromUrl[i];
                     setTimeout(() => {
                         if (i === 0)
-                            sideDialogsController.replace(propsToSidePanel(panel, navigation, smallLayout));
+                            sideDialogsController.replace(propsToSidePanel(panel, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
                         else
-                            sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
+                            sideDialogsController.open(propsToSidePanel(panel, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout))
                     }, 1);
                 }
+            } else {
+                // console.warn("Location path is not a collection path");
             }
             initialised.current = true;
         }
-    }, [location, navigation, sideDialogsController, smallLayout]);
+    }, [location, navigation.loading, navigation.isUrlCollectionPath, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout, navigation]);
 
     const close = useCallback(() => {
         sideDialogsController.close();
@@ -73,9 +76,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
         sideDialogsController.open(propsToSidePanel({
             selectedSubPath: defaultSelectedView,
             ...props,
-        }, navigation, smallLayout));
+        }, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
 
-    }, [sideDialogsController, navigation, smallLayout]);
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout]);
 
     const replace = useCallback((props: EntitySidePanelProps<any>) => {
 
@@ -83,9 +86,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation, smallLayout));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
 
-    }, [navigation, sideDialogsController, smallLayout]);
+    }, [navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout]);
 
     return {
         close,
@@ -146,14 +149,17 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     return sidePanels;
 }
 
-const propsToSidePanel = (props: EntitySidePanelProps<any>, navigation: NavigationController, smallLayout: boolean): SideDialogPanelProps => {
+const propsToSidePanel = (props: EntitySidePanelProps<any>,
+                          buildUrlCollectionPath: (path: string) => string,
+                          resolveAliasesFrom: (pathWithAliases: string) => string,
+                          smallLayout: boolean): SideDialogPanelProps => {
 
         const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
         const newPath = props.entityId
-            ? navigation.buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
-            : navigation.buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
-        const resolvedPath = navigation.resolveAliasesFrom(props.path);
+            ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
+            : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+        const resolvedPath = resolveAliasesFrom(props.path);
 
         const resolvedPanelProps: EntitySidePanelProps<any> = {
             ...props,
@@ -164,7 +170,7 @@ const propsToSidePanel = (props: EntitySidePanelProps<any>, navigation: Navigati
             key: `${props.path}/${props.entityId}`,
             component: <EntitySidePanel {...resolvedPanelProps}/>,
             urlPath: newPath,
-            parentUrlPath: navigation.buildUrlCollectionPath(collectionPath),
+            parentUrlPath: buildUrlCollectionPath(collectionPath),
             width: getEntityViewWidth(props, smallLayout),
             onClose: props.onClose
         });

package/src/preview/PropertyPreview.tsx

@@ -195,7 +195,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
 
     } else if (property.dataType === "boolean") {
         if (typeof value === "boolean") {
-            content = <BooleanPreview value={value}/>;
+            content = <BooleanPreview value={value} size={size} property={property}/>;
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }

package/src/preview/PropertyPreviewProps.tsx

@@ -8,7 +8,7 @@ export type PreviewSize = "medium" | "small" | "tiny";
 /**
  * @group Preview components
  */
-export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any, M extends Record<string, any> = Record<string, any>> {
+export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any> {
     /**
      * Name of the property
      */
@@ -24,11 +24,6 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     property: Property<T> | ResolvedProperty<T>;
 
-    /**
-     * Click handler
-     */
-    // onClick?: () => void;
-
     /**
      * Desired size of the preview, depending on the context.
      */
@@ -51,9 +46,4 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     customProps?: CustomProps;
 
-    /**
-     * Entity this property refers to
-     */
-    // entity?: Entity<M>;
-
 }

package/src/preview/components/BooleanPreview.tsx

@@ -1,11 +1,26 @@
 import React from "react";
-import { Checkbox } from "@firecms/ui";
+import { Checkbox, cn } from "@firecms/ui";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { Property } from "../../types";
 
 /**
  * @group Preview components
  */
-export function BooleanPreview({ value }: {
-    value: boolean
+export function BooleanPreview({
+                                   value,
+                                   size,
+                                   property
+                               }: {
+    value: boolean,
+    size: PreviewSize,
+    property: Property,
 }): React.ReactElement {
-    return <Checkbox checked={value} color={"secondary"}/>;
+    return <div className={"flex flex-row gap-2 items-center"}>
+        <Checkbox checked={value}
+                  padding={false}
+                  size={size}
+                  color={"secondary"}/>
+        {property.name && <span
+            className={cn("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
+    </div>;
 }

package/src/preview/components/EnumValuesChip.tsx

@@ -6,7 +6,7 @@ import { Chip } from "@firecms/ui";
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "small" | "medium";
+    size: "tiny" | "small" | "medium";
     className?: string;
     children?: React.ReactNode;
 }

package/src/preview/components/ReferencePreview.tsx

@@ -1,21 +1,17 @@
 import * as React from "react";
-import { useMemo } from "react";
 
-import { Entity, EntityCollection, EntityReference, ResolvedProperty } from "../../types";
-
-import { getReferencePreviewKeys, getValueInPath, resolveCollection } from "../../util";
+import { Entity, EntityCollection, EntityReference } from "../../types";
 import {
     useCustomizationController,
     useEntityFetch,
     useNavigationController,
     useSideEntityController
 } from "../../hooks";
-import { PropertyPreview } from "../PropertyPreview";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { SkeletonPropertyComponent } from "../property_previews/SkeletonPropertyComponent";
-import { cn, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { IconButton, KeyboardTabIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { ErrorView } from "../../components";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
+import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -23,7 +19,7 @@ export type ReferencePreviewProps = {
     size: PreviewSize;
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
-    onHover?: boolean;
+    hover?: boolean;
     allowEntityNavigation?: boolean;
 };
 
@@ -34,12 +30,12 @@ export const ReferencePreview = React.memo<ReferencePreviewProps>(function Refer
     const reference = props.reference;
     if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
-        return <ReferencePreviewContainer
+        return <EntityPreviewContainer
             onClick={props.onClick}
             size={props.size}>
             <ErrorView error={"Unexpected value. Click to edit"}
                        tooltip={JSON.stringify(reference)}/>
-        </ReferencePreviewContainer>;
+        </EntityPreviewContainer>;
     }
     return <ReferencePreviewInternal {...props} />;
 }, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
@@ -47,7 +43,7 @@ export const ReferencePreview = React.memo<ReferencePreviewProps>(function Refer
 function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewProps) {
     return prevProps.disabled === nextProps.disabled &&
         prevProps.size === nextProps.size &&
-        prevProps.onHover === nextProps.onHover &&
+        prevProps.hover === nextProps.hover &&
         prevProps.reference?.id === nextProps.reference?.id &&
         prevProps.reference?.path === nextProps.reference?.path &&
         prevProps.allowEntityNavigation === nextProps.allowEntityNavigation
@@ -59,7 +55,7 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
                                                                      reference,
                                                                      previewProperties,
                                                                      size,
-                                                                     onHover,
+                                                                     hover,
                                                                      onClick,
                                                                      allowEntityNavigation = true
                                                                  }: ReferencePreviewProps) {
@@ -68,7 +64,7 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
 
     const navigationController = useNavigationController();
 
-    const collection = navigationController.getCollection<EntityCollection<M>>(reference.path);
+    const collection = navigationController.getCollection(reference.path);
     if (!collection) {
         if (customizationController.components?.missingReference) {
             return <customizationController.components.missingReference path={reference.path}/>;
@@ -85,18 +81,22 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
         disabled={disabled}
         allowEntityNavigation={allowEntityNavigation}
         onClick={onClick}
-        onHover={onHover}/>
+        hover={hover}/>
 }
 
-function ReferencePreviewExisting<M extends Record<string, any> = any>({ reference, collection, previewProperties, size, disabled, allowEntityNavigation, onClick, onHover }: ReferencePreviewProps & {
+function ReferencePreviewExisting<M extends Record<string, any> = any>({
+                                                                           reference,
+                                                                           collection,
+                                                                           previewProperties,
+                                                                           size,
+                                                                           disabled,
+                                                                           allowEntityNavigation,
+                                                                           onClick,
+                                                                           hover
+                                                                       }: ReferencePreviewProps & {
     collection: EntityCollection<M>
 }) {
 
-    const customizationController = useCustomizationController();
-
-    const analyticsController = useAnalyticsController();
-    const sideEntityController = useSideEntityController();
-
     const {
         entity,
         dataLoading,
@@ -114,145 +114,53 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({ referen
 
     const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
 
-    const resolvedCollection = useMemo(() => resolveCollection({
-        collection,
-        path: reference.path,
-        values: usedEntity?.values,
-        fields: customizationController.propertyConfigs
-    }), [collection]);
-
-    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
-        [previewProperties, resolvedCollection, size]);
-
     let body: React.ReactNode;
 
-    if (!resolvedCollection) {
-        return <ErrorView
-            error={"Could not find collection with id " + resolvedCollection}/>
-    }
-
     if (!reference) {
         body = <ErrorView error={"Reference not set"}/>;
     } else if (usedEntity && !usedEntity.values) {
         body = <ErrorView error={"Reference does not exist"}
                           tooltip={reference.path}/>;
-    } else {
-        body = (
-            <>
-                <div
-                    className="flex flex-col flex-grow w-full max-w-[calc(100%-52px)] m-1">
-
-                    {size !== "tiny" && (
-                        reference
-                            ? <div className={`${
-                                size !== "medium"
-                                    ? "block whitespace-nowrap overflow-hidden truncate"
-                                    : ""
-                            }`}>
-                                <Typography variant={"caption"}
-                                            className={"font-mono"}>
-                                    {reference.id}
-                                </Typography>
-                            </div>
-                            : <Skeleton/>)}
-
-                    {listProperties && listProperties.map((key) => {
-                        const childProperty = resolvedCollection.properties[key as string];
-                        if (!childProperty) return null;
-
-                        return (
-                            <div key={"ref_prev_" + (key as string)}
-                                 className={listProperties.length > 1 ? "my-0.5" : "my-0"}>
-                                {
-                                    usedEntity
-                                        ? <PropertyPreview
-                                            propertyKey={key as string}
-                                            value={getValueInPath(usedEntity.values, key)}
-                                            property={childProperty as ResolvedProperty}
-                                            // entity={usedEntity}
-                                            size={"tiny"}/>
-                                        : <SkeletonPropertyComponent
-                                            property={childProperty as ResolvedProperty}
-                                            size={"tiny"}/>
-                                }
-                            </div>
-                        );
-                    })}
-
-                </div>
-                <div className={`my-${size === "tiny" ? 2 : 4}`}>
-                    {!disabled && usedEntity && allowEntityNavigation &&
-                        <Tooltip title={`See details for ${usedEntity.id}`}>
-                            <IconButton
-                                color={"inherit"}
-                                size={"small"}
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    analyticsController.onAnalyticsEvent?.("entity_click_from_reference", {
-                                        path: usedEntity.path,
-                                        entityId: usedEntity.id
-                                    });
-                                    sideEntityController.open({
-                                        entityId: usedEntity.id,
-                                        path: usedEntity.path,
-                                        collection: resolvedCollection,
-                                        updateUrl: true
-                                    });
-                                }}>
-                                <KeyboardTabIcon size={"small"}/>
-                            </IconButton>
-                        </Tooltip>}
-                </div>
-            </>
+    }
+    if (body) {
+
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                {body}
+            </EntityPreviewContainer>
         );
     }
 
-    return (
-        <ReferencePreviewContainer onClick={disabled ? undefined : onClick}
-                                   onHover={disabled ? undefined : onHover}
-                                   size={size}>
-            {body}
-        </ReferencePreviewContainer>
-    );
-}
-
-export function ReferencePreviewContainer({
-                                              children,
-                                              onHover,
-                                              size,
-                                              onClick
-                                          }: {
-    children: React.ReactNode;
-    onHover?: boolean;
-    size: PreviewSize;
-    onClick?: (e: React.SyntheticEvent) => void;
-}) {
-    return <Typography variant={"label"}
-                       className={cn("bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60",
-                           "w-full",
-                           "flex",
-                           "rounded-md",
-                           "overflow-hidden",
-                           onHover ? "hover:bg-opacity-90 dark:hover:bg-opacity-90" : "",
-                           size === "medium" ? "p-2" : "p-1",
-                           size === "tiny" ? "items-center" : "",
-                           "transition-colors duration-300 ease-in-out ",
-                           // onHover ? "shadow-outline" : "",
-                           onClick ? "cursor-pointer" : "")}
-                       style={{
-                           // @ts-ignore
-                           tabindex: 0
-                       }}
-                       onClick={(event) => {
-                           if (onClick) {
-                               event.preventDefault();
-                               onClick(event);
-                           }
-                       }}>
+    if (dataLoading && !usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                <Skeleton/>
+            </EntityPreviewContainer>
+        );
+    }
 
-        {children}
+    if (!usedEntity) {
+        return (
+            <EntityPreviewContainer onClick={disabled ? undefined : onClick}
+                                    hover={disabled ? undefined : hover}
+                                    size={size}>
+                <ErrorView error={"Entity not found"}/>
+            </EntityPreviewContainer>
+        );
+    }
+    return <EntityPreview size={size}
+                          previewProperties={previewProperties}
+                          disabled={disabled}
+                          entity={usedEntity}
+                          collection={collection}
+                          onClick={onClick}
+                          includeEntityNavigation={allowEntityNavigation}
+                          hover={hover}/>;
 
-    </Typography>
 }
 
 const referencesCache = new Map<string, Entity<any>>();

package/src/preview/property_previews/StringPropertyPreview.tsx

@@ -6,7 +6,7 @@ import { PreviewType } from "../../types";
 import { UrlComponentPreview } from "../components/UrlComponentPreview";
 import { PropertyPreviewProps } from "../PropertyPreviewProps";
 import { ErrorBoundary } from "../../components";
-import { Chip, getColorSchemeForSeed } from "@firecms/ui";
+import { Chip, cn, getColorSchemeForSeed } from "@firecms/ui";
 
 /**
  * @group Preview components
@@ -24,14 +24,14 @@ export function StringPropertyPreview({
         return <EnumValuesChip
             enumKey={enumKey}
             enumValues={resolvedProperty.enumValues}
-            size={size !== "medium" ? "small" : "medium"}/>;
+            size={size}/>;
     } else if (property.previewAsTag) {
         const colorScheme = getColorSchemeForSeed(propertyKey ?? "");
         return (
             <ErrorBoundary>
                 <Chip
                     colorScheme={colorScheme}
-                    size={size !== "medium" ? "small" : "medium"}>
+                    size={size}>
                     {value}
                 </Chip>
             </ErrorBoundary>);
@@ -45,15 +45,16 @@ export function StringPropertyPreview({
         if (!value) return <></>;
         const lines = value.split("\n");
         return value && value.includes("\n")
-            ? <div className={"overflow-x-scroll"}>
+            ? <div className={cn("overflow-x-scroll", size === "tiny" ? "text-sm" : "")}>
                 {lines.map((str, index) =>
                     <React.Fragment key={`string_preview_${index}`}>
                         <span>{str}</span>
                         {index !== lines.length - 1 && <br/>}
                     </React.Fragment>)}
             </div>
-            : <>
-                {value}
-            </>;
+            : (size === "tiny"
+                    ? <span className={"text-sm"}>{value}</span>
+                    : <>{value}</>
+            );
     }
 }