Add preview types

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

@@ -1,22 +1,26 @@
-import { t } from '@lingui/core/macro';
-import { Drawer, Loader, Stack, Text } from '@mantine/core';
+import { Divider, Drawer, LoadingOverlay, Stack } from '@mantine/core';
 
 import { StylishText } from '@lib/components/StylishText';
 import { ModelInformationDict } from '@lib/enums/ModelInformation';
 import type { ModelType } from '@lib/index';
+import { useMemo } from 'react';
 import { useInstance } from '../../hooks/UseInstance';
 import { getModelInfo } from '../render/ModelType';
+import { type PreviewType, getPreviewComponentForModel } from './PreviewType';
+import { FallbackPreviewComponent } from './models/Fallback';
 
 export default function PreviewDrawer({
   modelType,
   id,
   instance: providedInstance,
+  filters,
   opened,
   onClose
 }: Readonly<{
   modelType: ModelType;
   id: number;
   instance?: any;
+  filters?: Record<string, any>;
   opened: boolean;
   onClose: () => void;
 }>) {
@@ -28,16 +32,36 @@ export default function PreviewDrawer({
     pk: id,
     hasPrimaryKey: true,
     defaultValue: {},
+    params: filters,
     disabled: !!providedInstance
   });
 
-  const instance = providedInstance ?? fetchedInstance;
+  const instance = useMemo(() => {
+    return providedInstance ?? fetchedInstance;
+  }, [providedInstance, fetchedInstance]);
+
+  const previewComponent: PreviewType = useMemo(() => {
+    const component: PreviewType | null = getPreviewComponentForModel({
+      modelType
+    });
+
+    if (component == null) {
+      return FallbackPreviewComponent({
+        modelInfo,
+        modelType,
+        modelId: id,
+        instance
+      });
+    }
+
+    return component;
+  }, [modelType]);
 
   return (
     <Drawer
       position='right'
       size='xl'
-      title={<StylishText size='lg'>{`${modelInfo.label} #${id}`}</StylishText>}
+      title={<StylishText size='lg'>{previewComponent.title}</StylishText>}
       opened={opened}
       onClose={onClose}
       withCloseButton
@@ -48,11 +72,9 @@ export default function PreviewDrawer({
       }}
     >
       <Stack gap='xs'>
-        {!instance && instanceQuery.isFetching ? (
-          <Loader />
-        ) : (
-          <Text c='dimmed'>{t`Preview for ${modelInfo.label} #${id}`}</Text>
-        )}
+        <Divider />
+        <LoadingOverlay visible={instanceQuery.isFetching} />
+        {previewComponent.preview}
       </Stack>
     </Drawer>
   );

src/frontend/src/components/previews/PreviewType.tsx

@@ -0,0 +1,25 @@
+import type { ModelType } from '@lib/enums/ModelType';
+import type { ReactNode } from 'react';
+
+export interface PreviewType {
+  preview: ReactNode;
+  title: string;
+}
+
+export type PreviewComponentProps = {
+  instance: any;
+};
+
+export type PreviewComponent = (props: PreviewComponentProps) => PreviewType;
+
+export function getPreviewComponentForModel({
+  modelType
+}: {
+  modelType: ModelType;
+}): PreviewType | null {
+  switch (modelType) {
+    default:
+      // Return null to indicate that this model type is not supported
+      return null;
+  }
+}

src/frontend/src/components/previews/models/Fallback.tsx

@@ -0,0 +1,31 @@
+import type { ModelInformationInterface } from '@lib/enums/ModelInformation';
+import type { ModelType } from '@lib/enums/ModelType';
+import { t } from '@lingui/core/macro';
+import { Alert, Text } from '@mantine/core';
+import { IconExclamationCircle } from '@tabler/icons-react';
+import type { PreviewType } from '../PreviewType';
+
+export function FallbackPreviewComponent({
+  modelInfo,
+  modelType,
+  modelId,
+  instance
+}: {
+  modelInfo: ModelInformationInterface;
+  modelType: ModelType;
+  modelId: number | string;
+  instance: any;
+}): PreviewType {
+  return {
+    title: `${modelInfo.label} #${modelId}`,
+    preview: (
+      <Alert
+        color='red'
+        title={t`No preview available`}
+        icon={<IconExclamationCircle />}
+      >
+        <Text>{t`No preview available for this model.`}</Text>
+      </Alert>
+    )
+  };
+}