From 3ed3adc6ef610e765946e73b08c031150bacec7a Mon Sep 17 00:00:00 2001
From: gagik <me@gagik.co>
Date: Fri, 13 Jan 2023 16:37:48 +0100
Subject: [PATCH] Add support for expanding embedded and link objects.

---
 .../src/components/DataTable.tsx              | 54 ++++++++++---------
 .../src/components/RealmDataInspector.tsx     | 23 +++++---
 .../src/pages/DataVisualizer.tsx              |  4 +-
 .../src/ConvertFunctions.tsx                  | 20 ++++---
 .../testData/createCornerCaseData.tsx         | 13 ++++-
 5 files changed, 73 insertions(+), 41 deletions(-)

diff --git a/flipper-plugin-realm/src/components/DataTable.tsx b/flipper-plugin-realm/src/components/DataTable.tsx
index a2e149b..05f5c76 100644
--- a/flipper-plugin-realm/src/components/DataTable.tsx
+++ b/flipper-plugin-realm/src/components/DataTable.tsx
@@ -2,6 +2,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import { Button, Table } from 'antd';
 import {
   ColumnsType,
+  ExpandableConfig,
   FilterValue,
   SorterResult,
   TablePaginationConfig,
@@ -25,10 +26,9 @@ export type ColumnType = {
 
 
 type DataTableProps = {
-  columns: ColumnType[];
   objects: DeserializedRealmObject[];
   schemas: SortedObjectSchema[];
-  currentSchema: Realm.CanonicalObjectSchema;
+  currentSchema: SortedObjectSchema;
   sortingDirection?: 'ascend' | 'descend' | null;
   sortingColumn: string | null;
   generateMenuItems?: MenuItemGenerator;
@@ -46,9 +46,10 @@ type DataTableProps = {
     wipeStacks?: boolean,
   ) => void;
   clickAction?: (object: DeserializedRealmObject) => void;
+  getObject: (object: RealmObjectReference, objectSchemaName: string) => Promise<DeserializedRealmObject | null>;
 };
 
-type ClickableTextType = {
+type ClickableTextProps = {
   displayText: string | number | JSX.Element;
   isLongString: boolean;
   value: PlainRealmObject | RealmObjectReference;
@@ -57,7 +58,7 @@ type ClickableTextType = {
 };
 
 // Receives a schema and returns column objects for the table.
-export const schemaObjToColumns = (
+const schemaObjectToColumns = (
   schema: SortedObjectSchema,
 ): ColumnType[] => {
   return schema.order.map((propertyName) => {
@@ -75,7 +76,6 @@ export const schemaObjToColumns = (
 
 export const DataTable = (dataTableProps: DataTableProps) => {
   const {
-    columns,
     objects,
     schemas,
     currentSchema,
@@ -90,6 +90,7 @@ export const DataTable = (dataTableProps: DataTableProps) => {
     totalObjects = 0,
     fetchMore = () => undefined, 
     clickAction,
+    getObject,
   } = dataTableProps;
   const instance = usePlugin(plugin);
   const state = useValue(instance.state);
@@ -108,13 +109,14 @@ export const DataTable = (dataTableProps: DataTableProps) => {
     expandedRowRender: () => {
       return <></>;
     },
+    expandedRowKeys: [],
     showExpandColumn: false,
-  });
+  } as ExpandableConfig<DeserializedRealmObject>);
 
   /** Hook to close the nested Table when clicked outside of it. */
   useEffect(() => {
     const closeNestedTable = () => {
-      setRowExpansionProp({ ...rowExpansionProp });
+      setRowExpansionProp({ ...rowExpansionProp, expandedRowKeys: [] });
     };
     document.body.addEventListener('click', closeNestedTable);
     return () => document.body.removeEventListener('click', closeNestedTable);
@@ -139,7 +141,7 @@ export const DataTable = (dataTableProps: DataTableProps) => {
     value,
     inspectorView,
     isReference = false,
-  }: ClickableTextType) => {
+  }: ClickableTextProps) => {
     const [isHovering, setHovering] = useState(false);
     return (
       <div>
@@ -171,20 +173,18 @@ export const DataTable = (dataTableProps: DataTableProps) => {
   };
 
   /** Definition of antd-specific columns. This constant is passed to the antd table as a property. */
-  const antdColumns:ColumnsType<DeserializedRealmObject> = columns.map((column) => {
+  const antdColumns:ColumnsType<DeserializedRealmObject> = schemaObjectToColumns(currentSchema).map((column) => {
     const property: Realm.CanonicalObjectSchemaProperty =
       currentSchema.properties[column.name];
-
+    const linkedSchema = schemas.find(
+      (schema) => property && schema.name === property.objectType,
+    );
     /*  A function that is applied for every cell to specify what to render in each cell
       on top of the pure value specified in the 'dataSource' property of the antd table.*/
-    const render = (value: PlainRealmObject, row: DeserializedRealmObject) => {
+    const render = (value: PlainRealmObject | RealmObjectReference, row: DeserializedRealmObject) => {
       /** Apply the renderValue function on the value in the cell to create a standard cell. */
       const cellValue = renderValue(value, property, schemas);
 
-      const linkedSchema = schemas.find(
-        (schema) => schema.name === property.objectType,
-      );
-
       /** Render buttons to expand the row and a clickable text if the cell contains a linked or embedded Realm object. */
       if (value !== null && linkedSchema && property.type === 'object') {
         const isEmbedded = linkedSchema.embedded;
@@ -197,21 +197,26 @@ export const DataTable = (dataTableProps: DataTableProps) => {
               gap: '5px',
             }}
           >
-            <Button
+          {/* Embedded objects cannot be queried in the row. */
+          !isEmbedded && <Button
               shape="circle"
               type="primary"
               size="small"
               icon={<PlusOutlined />}
-              onClick={(event) => {
+              onClick={async (event) => {
                 event.stopPropagation();
-                expandRow(
-                  row.objectKey,
-                  linkedSchema,
-                  value,
-                );
+                // Fetch the linked object and if found, expand the table with the row.
+                let linkedObject = await getObject(value as RealmObjectReference, linkedSchema.name)
+                if(linkedObject) {
+                  expandRow(
+                    row.objectKey,
+                    linkedSchema,
+                    linkedObject,
+                  );
+                }
               }}
               ghost
-            />
+            />}
             {
               <ClickableText
                 value={
@@ -297,7 +302,7 @@ export const DataTable = (dataTableProps: DataTableProps) => {
   const expandRow = (
     rowToExpandKey: any,
     linkedSchema: SortedObjectSchema,
-    objectToRender: PlainRealmObject,
+    objectToRender: DeserializedRealmObject,
   ) => {
     const newRowExpansionProp = {
       ...rowExpansionProp,
@@ -308,7 +313,6 @@ export const DataTable = (dataTableProps: DataTableProps) => {
             { ...dataTableProps }
             objects={[objectToRender]}
             currentSchema={linkedSchema}
-
           />
         );
       },
diff --git a/flipper-plugin-realm/src/components/RealmDataInspector.tsx b/flipper-plugin-realm/src/components/RealmDataInspector.tsx
index a4fd846..cbad18d 100644
--- a/flipper-plugin-realm/src/components/RealmDataInspector.tsx
+++ b/flipper-plugin-realm/src/components/RealmDataInspector.tsx
@@ -4,10 +4,10 @@ import {
   CloseOutlined,
   SearchOutlined,
 } from '@ant-design/icons';
-import { Button, Col, Layout, Radio, Row, Space, Tooltip } from 'antd';
+import { Button, Col, Layout, Radio, Row, Space, Tag, Tooltip } from 'antd';
 import { DataInspector, DetailSidebar, Spinner } from 'flipper-plugin';
 import React, { useEffect, useState } from 'react';
-import { PlainRealmObject, RealmObjectReference } from '../CommonTypes';
+import { DeserializedRealmObject, PlainRealmObject, RealmObjectReference } from '../CommonTypes';
 import { BoldSpan } from './SchemaSelect';
 
 export type InspectionDataType = {
@@ -30,7 +30,7 @@ type RealmDataInspectorProps = {
   goForwardStack: Array<InspectionDataType>;
   setGoForwardStack: React.Dispatch<React.SetStateAction<InspectionDataType[]>>;
   setNewInspectionData: (newInspectionData: InspectionDataType) => void;
-  getObject: (object: RealmObjectReference) => Promise<PlainRealmObject | null>;
+  getObject: (object: RealmObjectReference) => Promise<DeserializedRealmObject | null>;
 };
 
 // Helper function to traverse through a Realm object given a path
@@ -72,7 +72,7 @@ export const RealmDataInspector = ({
         setInspectionData({
           data: {
             [inspectionData.data.objectType as string]:
-            loadedObject,
+            loadedObject.realmObject,
           },
           view: inspectionData.view,
           isReference: false,
@@ -90,6 +90,16 @@ export const RealmDataInspector = ({
     backgroundColor: flickering ? '#6932c9' : 'transparent',
   };
 
+  // // TODO: not sure if this is best way to go about this.
+  // let formattedObjects: any = {};
+  // Object.entries(inspectionData.data).forEach(([field, fieldValue]) => {
+  //   if (typeof fieldValue === "object" && fieldValue.objectKey && fieldValue.objectType) {
+  //     formattedObjects[field] = `[${fieldValue.objectType}]._objectKey=${fieldValue.objectKey}`
+  //   } else {
+  //     formattedObjects[field] = fieldValue;
+  //   }
+  // })
+
   return (
     <DetailSidebar>
       <Space direction="vertical" size="middle" style={flickerStyle}>
@@ -160,7 +170,7 @@ export const RealmDataInspector = ({
                   if(linkedSchema) {
                     ownSchema = schemas.find(
                       (
-                        innerSchema // And there exists some non-embedded schema that fits the objectType of that property
+                        innerSchema // And there exists some schema that fits the objectType of that property
                       ) =>
                         linkedSchema && linkedSchema.properties[name].objectType ===
                         innerSchema.name
@@ -174,7 +184,8 @@ export const RealmDataInspector = ({
                     return (
                       <>
                         {name + ' '}
-                        <Tooltip title="Inspect Linked Object" placement="topLeft">
+                        <Tag color="processing">Ref</Tag>
+                        <Tooltip title="Inspect Referenced Object" placement="topLeft">
                           <Button
                             shape="circle"
                             type="primary"
diff --git a/flipper-plugin-realm/src/pages/DataVisualizer.tsx b/flipper-plugin-realm/src/pages/DataVisualizer.tsx
index bab7610..09dcfe6 100644
--- a/flipper-plugin-realm/src/pages/DataVisualizer.tsx
+++ b/flipper-plugin-realm/src/pages/DataVisualizer.tsx
@@ -6,7 +6,7 @@ import { DropdownPropertyType, MenuItemGenerator, DeserializedRealmObject, Sorte
 import {
   CustomDropdown,
 } from '../components/CustomDropdown';
-import { DataTable, schemaObjToColumns } from '../components/DataTable';
+import { DataTable } from '../components/DataTable';
 import { FieldEdit } from '../components/objectManipulation/FieldEdit';
 import { ObjectEdit } from '../components/objectManipulation/ObjectEdit';
 import {
@@ -241,7 +241,6 @@ const DataVisualizer = ({
           />
         ) : null}
         <DataTable
-          columns={schemaObjToColumns(currentSchema)}
           objects={objects}
           schemas={schemas}
           hasMore={hasMore}
@@ -258,6 +257,7 @@ const DataVisualizer = ({
           setNewInspectionData={setNewInspectionData}
           fetchMore={fetchMore}
           clickAction={clickAction}
+          getObject={(object: RealmObjectReference, schemaName: string) => {return getObject(selectedRealm, schemaName, object.objectKey)}}
         />
         <CustomDropdown {...updatedDropdownProp} />
         <RealmDataInspector
diff --git a/realm-flipper-plugin-device/src/ConvertFunctions.tsx b/realm-flipper-plugin-device/src/ConvertFunctions.tsx
index b8dc5ed..e4f16ab 100644
--- a/realm-flipper-plugin-device/src/ConvertFunctions.tsx
+++ b/realm-flipper-plugin-device/src/ConvertFunctions.tsx
@@ -27,10 +27,8 @@ export interface SerializedRealmObject extends RealmObjectReference {
   realmObject: any;
 }
 
-export const serializeRealmObject = (
-  realmObject: Realm.Object,
-  objectSchema: ObjectSchema,
-): SerializedRealmObject => {
+/** Helper to recursively serialize Realm objects and embedded objects into plain JavaScript objects. */
+const serializeObject = (realmObject: RealmObject, objectSchema: Realm.ObjectSchema): Record<string, unknown> => {
   const properties = objectSchema.properties;
   const jsonifiedObject = realmObject.toJSON();
 
@@ -51,10 +49,10 @@ export const serializeRealmObject = (
           const isEmbedded = (propertyValue.objectSchema() as ObjectSchema).embedded
           if (!isEmbedded) {
             // If the object is linked (not embedded), store only the object key and type
-            // as a seperate key for later plugin lazy loading
+            // as a seperate key for later plugin lazy loading reference
             jsonifiedObject[key] = {objectKey, objectType} as SerializedRealmObject;
           } else {
-            jsonifiedObject[key] = serializeRealmObject(jsonifiedObject[key] as Realm.Object, propertyValue.objectSchema());
+            jsonifiedObject[key] = serializeObject(propertyValue as Realm.Object, propertyValue.objectSchema());
           }
           break;
         case "data":
@@ -68,10 +66,18 @@ export const serializeRealmObject = (
       }
     }
   });
+  return jsonifiedObject;
+}
+
+/** Serialized a given Realm Object into a SerializedRealmObject, providing circular dependency safe format. */
+export const serializeRealmObject = (
+  realmObject: Realm.Object,
+  objectSchema: ObjectSchema,
+): SerializedRealmObject => {
   return {
     objectKey: realmObject._objectKey(),
     // flatted.toJSON is used to ensure circular objects can get stringified by Flutter.
-    realmObject: toJSON(jsonifiedObject),
+    realmObject: toJSON(serializeObject(realmObject, objectSchema)),
   };
 };
 
diff --git a/testApp/app/flipperTest/testData/createCornerCaseData.tsx b/testApp/app/flipperTest/testData/createCornerCaseData.tsx
index 5fbe9e2..1b791b5 100644
--- a/testApp/app/flipperTest/testData/createCornerCaseData.tsx
+++ b/testApp/app/flipperTest/testData/createCornerCaseData.tsx
@@ -9,6 +9,7 @@ export function createCornerCaseData(realm: Realm) {
     var nestedObject: any = realm.create('NestedObject', {
       _id: 0,
     } as any);
+
     const cornerCase: any = {
       embedded: {
         items: ['one', 'two', 'three'],
@@ -16,11 +17,21 @@ export function createCornerCaseData(realm: Realm) {
       mixed: null,
       indirectObject: nestedObject,
     };
-    // cornerCase.embedded.indirectCycle = cornerCase;
+
     nestedObject.nestedObject = nestedObject;
     let cornerCaseObject: any = realm.create('CornerCase', cornerCase);
     nestedObject.cornerCase = cornerCaseObject;
     cornerCaseObject.indirectCycle = nestedObject;
     cornerCaseObject.directCycle = cornerCaseObject;
+
+    const cornerCaseB: any = {
+      embedded: {
+        items: [],
+      },
+      mixed: null,
+    };
+    let cornerCaseObjectB: any = realm.create('CornerCase', cornerCaseB);
+
+    cornerCaseObject.embedded.embeddedReference = cornerCaseObjectB;
   });
 }