Improved reference preview error handling

firecmsco · Sep 7, 2023 · 9451a36 · 9451a36
1 parent c67b805
commit 9451a36
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 46 deletions.
diff --git a/lib/src/core/components/EntityCollectionTable/fields/TableReferenceField.tsx b/lib/src/core/components/EntityCollectionTable/fields/TableReferenceField.tsx
@@ -1,12 +1,7 @@
 import React, { useCallback, useState } from "react";
 import { Box, Button } from "@mui/material";
-import { ReferencePreview } from "../../../../preview";
-import {
-    CollectionSize,
-    Entity,
-    EntityReference,
-    FilterValues
-} from "../../../../types";
+import { ReferencePreview, ReferencePreviewContainer } from "../../../../preview";
+import { CollectionSize, Entity, EntityReference, FilterValues } from "../../../../types";
 
 import { getPreviewSizeFrom } from "../../../../preview/util";
 import { getReferenceFrom } from "../../../util";
@@ -95,7 +90,11 @@ export function TableReferenceField(props: {
                 previewProperties={previewProperties}
             />;
         else
-            return <ErrorView error={"Data is not a reference"}/>;
+            return <ReferencePreviewContainer
+                onClick={disabled ? undefined : handleOpen}
+                size={getPreviewSizeFrom(size)}>
+                <ErrorView title="Value is not a reference." error={"Click to edit"}/>
+            </ReferencePreviewContainer>;
     };
 
     const buildMultipleReferenceField = () => {

diff --git a/lib/src/preview/components/ReferencePreview.tsx b/lib/src/preview/components/ReferencePreview.tsx
@@ -1,45 +1,17 @@
 import * as React from "react";
 import { useMemo } from "react";
 
-import {
-    Box,
-    darken,
-    IconButton,
-    lighten,
-    Skeleton,
-    Tooltip,
-    Typography
-} from "@mui/material";
-import {
-    Entity,
-    EntityCollection,
-    EntityReference,
-    ResolvedProperty
-} from "../../types";
+import { Box, IconButton, Skeleton, Tooltip, Typography } from "@mui/material";
+import { Entity, EntityCollection, EntityReference, ResolvedProperty } from "../../types";
 
 import KeyboardTabIcon from "@mui/icons-material/KeyboardTab";
 
-import {
-    ErrorView,
-    getReferencePreviewKeys,
-    getValueInPath,
-    resolveCollection
-} from "../../core";
-import {
-    useEntityFetch,
-    useFireCMSContext,
-    useNavigationContext,
-    useSideEntityController
-} from "../../hooks";
+import { ErrorView, getReferencePreviewKeys, getValueInPath, resolveCollection } from "../../core";
+import { useEntityFetch, useFireCMSContext, useNavigationContext, useSideEntityController } from "../../hooks";
 import { PropertyPreview } from "../PropertyPreview";
 import { PreviewSize } from "../PropertyPreviewProps";
-import {
-    SkeletonPropertyComponent
-} from "../property_previews/SkeletonPropertyComponent";
-import {
-    fieldBackground,
-    fieldBackgroundHover
-} from "../../core/util/field_colors";
+import { SkeletonPropertyComponent } from "../property_previews/SkeletonPropertyComponent";
+import { fieldBackground, fieldBackgroundHover } from "../../core/util/field_colors";
 
 export type ReferencePreviewProps = {
     disabled?: boolean;
@@ -54,7 +26,19 @@ export type ReferencePreviewProps = {
 /**
  * @category Preview components
  */
-export const ReferencePreview = React.memo<ReferencePreviewProps>(ReferencePreviewInternal, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
+export const ReferencePreview = React.memo<ReferencePreviewProps>(function ReferencePreview(props: ReferencePreviewProps) {
+    const reference = props.reference;
+    if (!(reference instanceof EntityReference)) {
+        console.error("Reference preview received value of type", typeof reference);
+        return <ReferencePreviewContainer
+            onClick={props.onClick}
+            size={props.size}>
+            <ErrorView error={"Unexpected value. Click to edit"}
+                       tooltip={JSON.stringify(reference)}/>
+        </ReferencePreviewContainer>;
+    }
+    return <ReferencePreviewInternal {...props} />;
+}, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
 
 function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewProps) {
     return prevProps.disabled === nextProps.disabled &&
@@ -212,15 +196,15 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
     }
 
     return (
-        <ReferencePreviewWrap onClick={disabled ? undefined : onClick}
+        <ReferencePreviewContainer onClick={disabled ? undefined : onClick}
                               onHover={disabled ? undefined : onHover}
                               size={size}>
             {body}
-        </ReferencePreviewWrap>
+        </ReferencePreviewContainer>
     );
 }
 
-function ReferencePreviewWrap({
+export function ReferencePreviewContainer({
                                   children,
                                   onHover,
                                   size,