provide either pk or instance data

src/frontend/lib/types/Plugins.tsx

@@ -70,7 +70,7 @@ export type ImporterDrawerContext = {
 };
 
 export type PreviewDrawerContext = {
-  open: (modelType: ModelType, instance: any) => void;
+  open: (modelType: ModelType, id?: number, instance?: any) => void;
   close: () => void;
   isOpen: () => boolean;
 };

src/frontend/src/components/plugins/PluginContext.tsx

@@ -103,7 +103,8 @@ export const useInvenTreeContext = () => {
         sessionId: () => getGlobalImporterState().sessionId
       },
       preview: {
-        open: (modelType, instance) => openGlobalPreview(modelType, instance),
+        open: (modelType, id?, instance?) =>
+          openGlobalPreview(modelType, id, instance),
         close: () => closeGlobalPreview(),
         isOpen: () => getGlobalPreviewState().isOpen
       },

src/frontend/src/components/previews/GlobalPreviewDrawer.tsx

@@ -4,16 +4,18 @@ import PreviewDrawer from './PreviewDrawer';
 export default function GlobalPreviewDrawer() {
   const isOpen = usePreviewDrawerState((state) => state.isOpen);
   const modelType = usePreviewDrawerState((state) => state.modelType);
+  const id = usePreviewDrawerState((state) => state.id);
   const instance = usePreviewDrawerState((state) => state.instance);
   const closePreview = usePreviewDrawerState((state) => state.closePreview);
 
-  if (!isOpen || instance === null) {
+  if (!isOpen || modelType === undefined || id === undefined) {
     return null;
   }
 
   return (
     <PreviewDrawer
       modelType={modelType}
+      id={id}
       instance={instance}
       opened={isOpen}
       onClose={closePreview}

src/frontend/src/components/previews/PreviewDrawer.tsx

@@ -1,38 +1,53 @@
 import { t } from '@lingui/core/macro';
-import { Drawer, Stack, Text } from '@mantine/core';
+import { Drawer, Loader, Stack, Text } from '@mantine/core';
 
 import { StylishText } from '@lib/components/StylishText';
+import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/index';
+import { useInstance } from '../../hooks/UseInstance';
 import { getModelInfo } from '../render/ModelType';
 
 export default function PreviewDrawer({
   modelType,
-  instance,
+  id,
+  instance: providedInstance,
   opened,
   onClose
 }: Readonly<{
-  modelType?: ModelType;
+  modelType: ModelType;
+  id: number;
   instance?: any;
   opened: boolean;
   onClose: () => void;
 }>) {
-  const modelInfo = getModelInfo(instance.model);
+  const modelInfo = getModelInfo(modelType);
+  const apiEndpoint = ModelInformationDict[modelType].api_endpoint;
+
+  const { instance: fetchedInstance, instanceQuery } = useInstance({
+    endpoint: apiEndpoint,
+    pk: id,
+    hasPrimaryKey: true,
+    defaultValue: {},
+    disabled: !!providedInstance
+  });
+
+  const instance = providedInstance ?? fetchedInstance;
 
   return (
     <Drawer
       position='right'
       size='lg'
-      title={
-        <StylishText size='lg'>
-          TODO - implement actual preview content
-        </StylishText>
-      }
+      title={<StylishText size='lg'>{`${modelInfo.label} #${id}`}</StylishText>}
       opened={opened}
       onClose={onClose}
       withCloseButton
     >
       <Stack gap='xs'>
-        <Text c='dimmed'>{t`Preview for ${modelInfo.label} #${instance.pk}`}</Text>
+        {!instance && instanceQuery.isFetching ? (
+          <Loader />
+        ) : (
+          <Text c='dimmed'>{t`Preview for ${modelInfo.label} #${id}`}</Text>
+        )}
       </Stack>
     </Drawer>
   );

src/frontend/src/states/PreviewDrawerState.tsx

@@ -4,28 +4,40 @@ import { create } from 'zustand';
 interface PreviewDrawerStateProps {
   isOpen: boolean;
   modelType?: ModelType;
+  id?: number;
   instance?: any;
-  openPreview: (modelType: ModelType, instance: any) => void;
+  openPreview: (modelType: ModelType, id: number, instance?: any) => void;
   closePreview: () => void;
 }
 
 export const usePreviewDrawerState = create<PreviewDrawerStateProps>()(
   (set) => ({
     isOpen: false,
-    instance: null,
+    modelType: undefined,
+    id: undefined,
+    instance: undefined,
 
-    openPreview: (modelType: ModelType, instance: any) => {
-      set({ modelType, instance, isOpen: true });
+    openPreview: (modelType: ModelType, id: number, instance?: any) => {
+      set({ modelType, id, instance, isOpen: true });
     },
 
     closePreview: () => {
-      set({ modelType: undefined, instance: null, isOpen: false });
+      set({
+        modelType: undefined,
+        id: undefined,
+        instance: undefined,
+        isOpen: false
+      });
     }
   })
 );
 
-export function openGlobalPreview(modelType: ModelType, instance: any) {
-  usePreviewDrawerState.getState().openPreview(modelType, instance);
+export function openGlobalPreview(
+  modelType: ModelType,
+  id?: number,
+  instance?: any
+) {
+  usePreviewDrawerState.getState().openPreview(modelType, id, instance);
 }
 
 export function closeGlobalPreview() {