feat: update row preview component response props to row data (#117)

src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/common/constants.ts

@@ -4,6 +4,7 @@ export const DEFAULT_DRAWER_PROPS: Partial<MDrawerProps> = {
   PaperProps: {
     elevation: 2,
   },
+  SlideProps: { appear: true },
   anchor: "right",
   disableEnforceFocus: true,
   disableScrollLock: true,

src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.tsx

@@ -13,7 +13,7 @@ import { Drawer, DrawerTitle } from "./rowDrawer.styles";
 export interface RowDrawerProps<T extends RowData>
   extends Omit<MDrawerProps, "content" | "title"> {
   className?: string;
-  tableInstance: Table<T>;
+  tableInstance?: Table<T>;
   title: ReactNode;
 }
 
@@ -24,13 +24,14 @@ export const RowDrawer = <T extends RowData>({
   title,
   ...props /* Spread props to allow for Mui Drawer specific prop overrides. */
 }: RowDrawerProps<T>): JSX.Element => {
-  const { getIsRowPreview, resetRowPreview, toggleRowPreview } = tableInstance;
+  const { getIsRowPreview, resetRowPreview, toggleRowPreview } =
+    tableInstance || {};
   return (
     <Drawer
       {...DEFAULT_DRAWER_PROPS}
       className={className}
       onTransitionExited={resetRowPreview}
-      open={getIsRowPreview()}
+      open={getIsRowPreview?.()}
       {...props}
     >
       <DrawerTitle

src/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.tsx

@@ -1,5 +1,5 @@
 import { Grid, Typography } from "@mui/material";
-import { RowData, Table } from "@tanstack/react-table";
+import { RowData } from "@tanstack/react-table";
 import React from "react";
 import { ListConfig } from "../../../../../../../../../../config/entities";
 import { TEXT_BODY_400 } from "../../../../../../../../../../theme/common/typography";
@@ -14,19 +14,17 @@ interface RowDetailProps<T extends RowData> {
   columns: ListConfig<T>["columns"];
   expanded?: boolean;
   minColumns?: number;
-  tableInstance: Table<T>;
+  rowData: T;
 }
 
 export const RowDetail = <T extends RowData>({
   className,
   columns,
   expanded = true,
   minColumns = MIN_COLUMNS,
-  tableInstance,
+  rowData,
 }: RowDetailProps<T>): JSX.Element | null => {
   const [showMore, setShowMore] = React.useState<boolean>(expanded);
-  const { getRowPreviewRow } = tableInstance;
-  const { original: rowData } = getRowPreviewRow() || {};
   const visibleColumns = showMore ? columns : columns.slice(0, minColumns);
   const buttonText = showMore ? "Show less" : "Show more";
   const onToggleShowMore = (): void => setShowMore(!showMore);

src/components/Table/components/TableToolbar/components/RowPreview/rowPreview.tsx

@@ -13,7 +13,14 @@ export const RowPreview = <T extends RowData>({
   tableInstance,
 }: RowPreviewProps<T>): JSX.Element | null => {
   if (!rowPreviewView) return null;
+  const { getRowPreviewRow } = tableInstance;
+  const { original: response } = getRowPreviewRow() || {};
+  if (!response) return null;
   return (
-    <ComponentCreator components={rowPreviewView} response={tableInstance} />
+    <ComponentCreator
+      components={rowPreviewView}
+      response={response}
+      viewContext={{ tableInstance }}
+    />
   );
 };

src/config/entities.ts

@@ -1,5 +1,5 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { CellContext, ColumnSort, RowData } from "@tanstack/react-table";
+import { CellContext, ColumnSort, RowData, Table } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
@@ -435,4 +435,5 @@ export interface ViewContext<T extends RowData, TData = unknown> {
   exploreState: ExploreState;
   fileManifestState: FileManifestState;
   systemStatus: SystemStatus;
+  tableInstance?: Table<T>;
 }