Module Federation¶

export type BaseProps = {
  /**
   * Indicates whether the host application is online.
   */
  isOnline?: boolean;
  /**
   * ModulePermissionToken for the module, used to communicate with the module API.
   */
  modulePermissionToken?: string;
  /**
   * id of the module
   */
  moduleId?: string;
  /**
   * id of the organization, where the module is used
   */
  organizationId?: string;
  /**
   * base path of the module (that is part of the URL and will be used for routing)
   * e.g. /farm/modules/{moduleId}
   */
  basePath: string;
  /**
   * current path of the route, that is changed, when the host application navigates
   * e.g. /farm/modules/{moduleId}/details/42
   */
  currentNavigationPath?: string;
  /**
   * current language of the host application, en-US, de-DE, etc.
   */
  currentLanguage?: string;
  /**
   * current language id of the host application
   */
  currentLanguageId?: string;
  /**
   * common options that are used in the module, to show dropdowns with options
   */
  commonOptions?: AllDropdownsData<CommonOption>['items'];
  /**
   * environment variables that are used in the module, to show environment specific information
   */
  environmentVariables?: EnvironmentVariable[];
  /**
   * function to refresh the module permission token, that is used to communicate with the module api
   * @returns a new module permission token, or undefined if the token could not be refreshed
   */
  refreshModulePermissionToken?: () => Promise<string | undefined>;
  /**
   * Host navigation callback for non-React remotes.
   *
   * React modules should use React Router's `useNavigate` directly and prefer relative paths.
   * Angular (or other non-React) modules should call this callback to ask the host shell to navigate.
   *
   * @example
   * React module (recommended):
   * ```tsx
   * import { useNavigate } from 'react-router';
   *
   * const navigate = useNavigate();
   *
   * navigate('details/42'); // /farm/modules/{moduleId}/details/42
   * navigate(''); // /farm/modules/{moduleId}
   *
   * // Avoid absolute paths in module-internal navigation:
   * // navigate('/details/42')
   * ```
   *
   * @example
   * Angular module:
   * ```ts
   * // baseProps is provided by the host application
   * baseProps.navigateInHortiview?.('details/42');
   * baseProps.navigateInHortiview?.('');
   * ```
   *
   * The host can normalize and prepend `basePath` as needed.
   * @param path
   * @returns
   */
  navigateInHortiview?: (path: string) => void;
  /**
   * the entry file url for the module, that is used to load the module in the host application
   */
  sourcePath?: string;

  //#region Translations for breadcrumb
  /**
   * function to add a translation to the i18n instance of the host application, that is used for breadcrumb translations
   * @param translation
   * @param hide
   * @returns
   */
  addBreadcrumbTranslation?: (
    translation: {
      key: string;
      value: string;
    },
    hide?: boolean
  ) => void; //use key = id and value = name

  //#endregion

  //#region Messaging
  /**
   * function to show a snackbar in the host application, that is used to show messages in the host application
   * @param message
   * @param icon
   * @returns
   */
  showSnackbar?: (message: string, icon?: string) => void;

  //#endregion

  //#region Offline Actions
  /**
   * list of pending actions that are used in the module, to show pending actions in the host application
   */
  pendingActions?: ActionItem[];
  /**
   * function to get the list of pending actions, that are used in the module, to show pending actions in the host application
   * @returns
   */
  getPendingActions?: () => ActionItem[];
  /**
   * function to resolve a pending action, that is used in the module, to show pending actions in the host application
   * @param key
   * @param result
   * @returns
   */
  resolveAction?: (key: string, result?: string) => void;
  /**
   * function to start resolving a pending action, that is used in the module, to show pending actions in the host application
   * @param key
   * @returns
   */
  startResolvingAction?: (key: string) => void;
  /**
   * function to add a pending action, that is used in the module, to show pending actions in the host application
   * @param functionName
   * @param args
   * @param key
   * @returns
   */
  addAction?: (functionName: string, args: unknown[], key?: string) => void;
  /**
   * function to get the list of actions, that is used in the module, to show actions in the host application
   * @returns
   */
  getActions?: () => ActionItem[];
  /**
   * function to get an action by key, that is used in the module, to show actions in the host application
   * @param key
   * @returns
   */
  getActionByKey?: (key: string) => ActionItem | undefined;
  //#endregion

  //#region error handling and telemetry
  /**
   * function to log an event to the host application, that is used for telemetry
   * @param event
   * @param customProperties
   * @returns
   */
  logEvent?: (event: AppInsightsEvent, customProperties?: AppInsightsProperties) => void;
  /**
   * function to log an error to the host application, that is used for telemetry
   * @param exception
   * @returns
   */
  logError?: (exception: AppInsightsException) => void;
  /**
   * function to throw an error in the host application, that is used for error handling
   * @param message
   * @param code
   * @returns
   */
  throwError?: (message: string, code: number) => void;
  //#endregion

  /**
   * @deprecated Use `modulePermissionToken` instead. This property will be removed in a future version.
   */
  token?: string;
  /**
   * @deprecated Use endpoint in module api (/api/v8.0/Messages/SendMessage/{moduleId}) instead. This property will be removed in a future version.
   * @param message
   * @returns
   */
  showMessage?: (message: SystemMessage) => void;
};