Expose data import wizard to plugin context

Author: SchrodingersGat

src/frontend/lib/index.ts

@@ -15,6 +15,7 @@ export { UserRoles, UserPermissions } from './enums/Roles';
 export type {
   InvenTreePluginContext,
   InvenTreeFormsContext,
+  InvenTreeWizardsContext,
   PluginVersion,
   StockAdjustmentFormsContext
 } from './types/Plugins';
@@ -35,6 +36,12 @@ export type {
   UseModalReturn
 } from './types/Modals';
 
+export type {
+  DataImportWizardProps,
+  UseWizardProps,
+  UseWizardReturn
+} from './types/Wizards';
+
 // Common utility functions
 export { apiUrl } from './functions/Api';
 export {

src/frontend/lib/types/Plugins.tsx

@@ -14,6 +14,7 @@ import type { UseModalReturn } from './Modals';
 import type { RenderInstanceProps } from './Rendering';
 import type { SettingsStateProps } from './Settings';
 import type { UserStateProps } from './User';
+import type { DataImportWizardProps, UseWizardReturn } from './Wizards';
 
 export interface PluginProps {
   name: string;
@@ -48,6 +49,10 @@ export type InvenTreeFormsContext = {
   stockActions: StockAdjustmentFormsContext;
 };
 
+export type InvenTreeWizardsContext = {
+  importData: (props: DataImportWizardProps) => UseWizardReturn;
+};
+
 /**
  * A set of properties which are passed to a plugin,
  * for rendering an element in the user interface.
@@ -60,6 +65,8 @@ export type InvenTreeFormsContext = {
  * @param navigate - The navigation function (see react-router-dom)
  * @param theme - The current Mantine theme
  * @param colorScheme - The current Mantine color scheme (e.g. 'light' / 'dark')
+ * @param forms - A set of functions for rendering common InvenTree forms (see ../lib/types/Plugins.tsx)
+ * @param wizards - A set of functions for rendering common InvenTree wizards (see ../lib/types/Plugins.tsx)
  * @param host - The current host URL
  * @param i18n - The i18n instance for translations (from @lingui/core)
  * @param locale - The current locale string (e.g. 'en' / 'de')
@@ -87,6 +94,7 @@ export type InvenTreePluginContext = {
   navigate: NavigateFunction;
   theme: MantineTheme;
   forms: InvenTreeFormsContext;
+  wizards: InvenTreeWizardsContext;
   colorScheme: MantineColorScheme;
   model?: ModelType | string;
   id?: string | number | null;

src/frontend/lib/types/Wizards.tsx

@@ -0,0 +1,12 @@
+export interface UseWizardProps {
+  opened: boolean;
+  onClose: () => void;
+}
+
+export interface DataImportWizardProps extends UseWizardProps {
+  sessionId: number;
+}
+
+export interface UseWizardReturn {
+  wizard: React.ReactElement;
+}

src/frontend/src/components/importer/ImporterDrawer.tsx

@@ -14,6 +14,10 @@ import { IconCheck, IconExclamationCircle } from '@tabler/icons-react';
 import { type ReactNode, useMemo } from 'react';
 
 import { ModelType } from '@lib/enums/ModelType';
+import type {
+  DataImportWizardProps,
+  UseWizardReturn
+} from '@lib/types/Wizards';
 import { useImportSession } from '../../hooks/UseImportSession';
 import useStatusCodes from '../../hooks/UseStatusCodes';
 import { StylishText } from '../items/StylishText';
@@ -49,16 +53,10 @@ function ImportDrawerStepper({
   );
 }
 
-export default function ImporterDrawer({
-  sessionId,
-  opened,
-  onClose
-}: Readonly<{
-  sessionId: number;
-  opened: boolean;
-  onClose: () => void;
-}>) {
-  const session = useImportSession({ sessionId: sessionId });
+export default function ImporterDrawer(
+  props: DataImportWizardProps
+): React.ReactElement {
+  const session = useImportSession({ sessionId: props.sessionId });
 
   const importSessionStatus = useStatusCodes({
     modelType: ModelType.importsession
@@ -106,13 +104,13 @@ export default function ImporterDrawer({
             >
               {t`Data has been imported successfully`}
             </Alert>
-            <Button color='blue' onClick={onClose}>{t`Close`}</Button>
+            <Button color='blue' onClick={props.onClose}>{t`Close`}</Button>
           </Stack>
         );
       default:
         return <ImporterStatus session={session} />;
     }
-  }, [session.status, session.sessionQuery]);
+  }, [session.status, session.sessionQuery, props.onClose]);
 
   const title: ReactNode = useMemo(() => {
     return (
@@ -140,8 +138,8 @@ export default function ImporterDrawer({
       position='bottom'
       size='80%'
       title={title}
-      opened={opened}
-      onClose={onClose}
+      opened={props.opened}
+      onClose={props.onClose}
       withCloseButton={true}
       closeOnEscape={false}
       closeOnClickOutside={false}
@@ -160,3 +158,10 @@ export default function ImporterDrawer({
     </Drawer>
   );
 }
+
+// Hook for using the import wizard in a plugin context
+export function useImportWizard(props: DataImportWizardProps): UseWizardReturn {
+  return {
+    wizard: <ImporterDrawer {...props} />
+  };
+}

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

@@ -37,6 +37,7 @@ import {
   useEditApiFormModal
 } from '../../hooks/UseForm';
 import { useServerApiState } from '../../states/ServerApiState';
+import { useImportWizard } from '../importer/ImporterDrawer';
 import { RenderInstance } from '../render/Instance';
 
 export const useInvenTreeContext = () => {
@@ -86,6 +87,9 @@ export const useInvenTreeContext = () => {
           transferStock: useTransferStockItem,
           returnStock: useReturnStockItem
         }
+      },
+      wizards: {
+        importData: useImportWizard
       }
     };
   }, [