feat(frontend): expose inline render helpers (#11917)

* expose RenderInlineModel

* expose Thumbnail

* add changelog / lib entry

* move thumbnail back; use context

* move to context

* reduce diff

* add better type

* reduce diff more

src/frontend/lib/types/Plugins.tsx

@@ -2,6 +2,7 @@ import type { I18n } from '@lingui/core';
 import type { MantineColorScheme, MantineTheme } from '@mantine/core';
 import type { QueryClient } from '@tanstack/react-query';
 import type { AxiosInstance } from 'axios';
+import type { JSX } from 'react';
 import type { NavigateFunction } from 'react-router-dom';
 import type { ModelDict } from '../enums/ModelInformation';
 import type { ModelType } from '../enums/ModelType';
@@ -12,7 +13,12 @@ import type {
   StockOperationProps
 } from './Forms';
 import type { UseModalReturn } from './Modals';
-import type { RemoteInstanceProps, RenderInstanceProps } from './Rendering';
+import type {
+  RemoteInstanceProps,
+  RenderInlineModelProps,
+  RenderInstanceProps,
+  ThumbnailProps
+} from './Rendering';
 import type { SettingsStateProps } from './Settings';
 import type { InvenTreeTableRenderProps } from './Tables';
 import type { UserStateProps } from './User';
@@ -102,6 +108,10 @@ export type InvenTreePluginContext = {
   renderRemoteInstance: (
     props: Readonly<RemoteInstanceProps>
   ) => React.ReactNode;
+  renderInlineModel: (
+    props: Readonly<RenderInlineModelProps>
+  ) => React.ReactNode;
+  thumbnail: (props: Readonly<ThumbnailProps>) => JSX.Element;
   host: string;
   i18n: I18n;
   locale: string;

src/frontend/lib/types/Rendering.tsx

@@ -60,3 +60,26 @@ export interface RemoteInstanceProps {
   modelRenderer?: (instance: any) => ReactNode;
   pk: number;
 }
+export interface ThumbnailProps {
+  src?: string;
+  alt?: string;
+  size?: number;
+  text?: ReactNode;
+  align?: string;
+  link?: string;
+  hover?: boolean;
+  hoverSize?: number;
+}
+
+export interface RenderInlineModelProps {
+  primary: ReactNode;
+  secondary?: ReactNode;
+  showSecondary?: boolean;
+  prefix?: ReactNode;
+  suffix?: ReactNode;
+  image?: string;
+  labels?: string[];
+  url?: string;
+  navigate?: any;
+  tooltip?: string;
+}