[UI] Panel indicator badges (#11956)

* Refactor panel indicator dots

- Allow indicator status to be fetched async

* Add indicator dot for attachments

* Support parameters panel

* Refactor

- Expose more types to @lib
- Define new PanelIndicatorType type
- Support old interface

src/frontend/lib/index.ts

@@ -21,6 +21,12 @@ export type {
   StockAdjustmentFormsContext
 } from './types/Plugins';
 
+export type {
+  PanelIndicatorType,
+  PanelType,
+  PanelGroupType
+} from './types/Panel';
+
 export type {
   RowAction,
   RowViewProps,

src/frontend/lib/types/Panel.tsx

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+
+// The type of indicator dot to be shown against a panel
+export type PanelIndicatorType = 'info' | 'warning' | 'danger' | null;
+
+/**
+ * Type used to specify a single panel in a panel group
+ */
+export type PanelType = {
+  name: string;
+  label: string;
+  controls?: ReactNode;
+  icon?: ReactNode;
+  notification_dot?: PanelIndicatorType | (() => Promise<PanelIndicatorType>);
+  content?: ReactNode;
+  hidden?: boolean;
+  disabled?: boolean;
+  showHeadline?: boolean;
+  supportsDirty?: boolean;
+};
+
+/**
+ * Type used to specify a group of panels
+ */
+export type PanelGroupType = {
+  id: string;
+  label: string;
+  panelIDs?: string[];
+  panels?: PanelType[];
+};